CODEWITHSUNDEEP
csscss-float
Dimitri Vorontzov
Dimitri Vorontzov

Reputation: 8104

Div Clears Float Even Though No Clear Property is Set

This is way-too-basic question, but the behavior of the div on my website leaves me perplexed.

I've experienced identical issue before, so I am sure I am doing something wrong, consistently, or misunderstanding some fundamental CSS rule.

Question: Why does the red div tag near the bottom right of the site clears its left counterpart? There's no "clear" rule applied to it!

Here's the html:

<div id="home-left">
<?php 
echo "Some php=generated content";
?>
</div> <!-- END HOME-LEFT -->

<div id="home-right-container">
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</p>
</div> <!-- END HOME-RIGHT-CONTAINER -->

And here's the corresponding CSS: 

#home-left {
width:280px;
margin:0 0 0 20px;
//clear:both; /* STAY CLEAR OF THE SCROLLER-FEATHER-CONTAINER! */
}

#home-left h3 {

    //font-size: 1.128571429rem;
font-size:12px;
    line-height: 1.2;
    font-weight: bold;
text-transform:uppercase;
margin-bottom:10px;
}

#home-left p {
    margin: 0 0 24px;
    margin: 0 0 1.514285714rem;
font-size:11px;
    line-height: 1.5;
}

#home-right-container {
width:100px;
background:red;
float:right;
}

Upvotes: 0

Views: 819

Answers (4)

What have you tried
What have you tried

Reputation: 11138

The left div is actually clearing the right counterpart. This is because if the element is not floated, it will basically take on a margin stretching across the entire width of the page.

Two Solutions:

  1. Add float: left to the div on the left side of the red box.
  2. Add display: inline-block to the div on the left side of the lower red box.

Upvotes: 1

dowomenfart
dowomenfart

Reputation: 2803

Just add float: left on style.css Line 235. Hope this Helps.

Upvotes: 1

Ali Gangji
Ali Gangji

Reputation: 1503

float allows an element to float to the side of elements below it, not element above it.

If you float #home-left left, the right div will be to the right

Upvotes: 1

Schleis
Schleis

Reputation: 43700

Because it comes after the element that is to the right in the document flow.

You can either switch the element order which will give you the result that you want. Or float the other element to the left also which can also give the result that you want.

Upvotes: 1

Related Questions