CODEWITHSUNDEEP
htmlcss
Robbie Fikes
Robbie Fikes

Reputation: 409

Styling issue (using floats)

I am wonder why does the paragraph tag content fill in between two floated divs? I want the paragraph tagged content to be underneath the header. Also, why don't the line returns show in the paragraph tag?

Here's the JS Fiddle: http://jsfiddle.net/yf3nyfk1/

HTML:

<body>
<div id="header-container">
    <div id="header-wrap">
        <div class="left logo logoimg">
            <img src="http://i.imgur.com/dtMBhKq.png"/>
        </div>
        <ul class="nav">
            <li class="contact">CONTACT</li>
            <li class="about">ABOUT</li>
            <li class="portfolio">PORTFOLIO</li>
        </ul>
    </div>
</div>
<div>
<p>
Lorem ipsum...
</p>
</div>
</body>

CSS:

body {
background: #000000;
margin: 0;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
color: #FFFFFF;  
text-align: center;
}

h1 {
font-size: 24px;
color: #FF9000;
}

img {
max-width: 100%;
}

.left {
float: left;
}

ul{
    padding: 0px 0px 0px;
}

.right.nav {
    float: right;
}

/******************************************************************************/
/* Menus */
/******************************************************************************/
#header-container{
margin: auto;
padding: 80px 0px 0px;
max-width: 1160px;
width: 100%;
}

#header-wrap{
padding: 0px 40px 0px;
}

.logo{
max-width: 440px;
width: 100%;
}

ul{
    list-style-type:none;
    display: inline-block;
}

.nav{
float:right;
list-style-type:none;
overflow: hidden;   
}

.nav li{
float:right;
overflow: hidden;
}

.portfolio{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 4px 8px;
margin-left: 0px;
width: 87px;
text-align: center;
}

.about{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 4px 8px;
margin-left: 10px;
width: 60px;
text-align: center; 
}

.contact{
color: #00bff3;
border: 1px solid #00bff3;
padding: 8px 4px 8px;
margin-left: 10px;
width: 76px;
text-align: center;
}

.orangebutton{
color: #FF9000;
border: 1px solid #FF9000;
margin: 0px 5px 0px;
}

/******************************************************************************/
/* Media Queries */
/******************************************************************************/
@media only screen and (max-width: 867px) {
#header-wrap{
padding: 10px;

}

.right{
float: none;
}

.nav{
float: none;
}

.left {
float: none;
}
.logo{
margin:auto;

}
}

Upvotes: 0

Views: 21

Answers (2)

Ali Adravi
Ali Adravi

Reputation: 22833

Clear the floating if you want the p to next line so it can clear the floating, like this

<p style='clear:both'>
    Lorem ipsum...
</p>

http://jsfiddle.net/yf3nyfk1/2/

Upvotes: 0

Niels Keurentjes
Niels Keurentjes

Reputation: 41968

You need to clear the floats:

p {
    clear:both;    
}

Fixed fiddle.

More on clear to be read at MDN.

As for the second question, HTML ignores all whitespace, including linefeeds and carriage returns, collapsing them into a single space. To have newlines, either insert break elements with <br> or end the paragraph elements properly with </p>.

Alternatively you could also modify the handling of whitespace by setting whitespace:pre on the p elements in your CSS, but this is nearly never what you want. Just close the paragraphs properly to get actual paragraphs.

Upvotes: 1

Related Questions