Can't get content in the right place
I'm creating a small html and css project and running into a problem.
This is my html:
<div class="wrapper">
<div class="topText">Met vriendelijke groet,</div>
<div class="topLine"></div>
<div class="content">
<div class="left-content">
<strong>name lastname</strong> <br>
<p class="name">T</p><p class="address">+31(0)000 000000</p>
<p class="name">M</p><p class="address">+31(0)0 00000000</p>
<p class="name">E</p><p class="address">test@test.com</p>
</div>
<div class="right-content">
<strong>name lastname</strong> <br>
<p class="name">T</p><p class="address">+31(0)000 000000</p>
<p class="name">M</p><p class="address">+31(0)0 00000000</p>
<p class="name">E</p><p class="address">test@test.com</p>
</div>
</div>
<div class="bottomBar"></div>
</div>
and this is my css:
.wrapper {
width:100%;
font-family: Calibri, Candara, Segoe, 'Segoe UI', Optima, Arial, sans-serif;
}
.topText {
font-size: 11pt;
margin-bottom: 5px;
}
.topLine {
height:1pt;
width:100%;
background-color: #C80032;
margin-bottom: 5px;
}
.content {
height:100px;
width: 100%;
margin-bottom: 5px;
}
.left-content{
float:left;
margin-right: 25px;
}
.right-content{
}
.name{
margin: 0px !important;
}
.address{
margin: 0px 0px 0px 30px;
}
.bottomBar {
float: right;
width:90%;
height: 20px;
background-color:#7F7B7B;
}
Ok I have 2 divs called left and right content, in this content I have an attribute
...
I would like the html / css output to look like this:
Name Surname
T +31 (0) 000 000 000
M +31 (0) 0 00000000
E test@test.nl
I've tried playing with margin and this kind of stuf, but I can't figure out why it's wrong. And it's hard to show it in the editor here.
source to share
You are using a tag p
(paragraph) which has margins by default and is considered an element block
. To have two elements block
you need to use float
or a better solution to change your behavior to inline-block
.
Semantics:
As mentioned, the tag p
stands for paragraph
. Do you think it should be wrapped in this tag? I believe not. Consider using span
that is an element inline
.
source to share
Like the other answers, tags <p>
are block-level. The easiest way is to change the name of the p-tags to this:
<p class="address"><span class="name">T</span>+31(0)000 000000</p>
<p class="address"><span class="name">M</span>+31(0)000 000000</p>
<p class="address"><span class="name">E</span>test@test.com</p>
Changing <p>
to <span>
allows the span to sit in the line, so it will sit "next" to the address.
source to share