0

I have the following HTML:

<div>
   <div class="float-left gutter-right">
      xx
   </div>
   <div class="float-left gutter-right">
      yy
   </div>
</div>
<div>
zz
</div>

I would like to have xx and yy appear next to each other and zz appear below. But this is not what is happening.

How can I make it so the zz appears below?

Improve this question
2
  • Yes show us ur CSS first
    – Banning
    Commented Jul 18, 2013 at 13:04
  • add a specific class to the xx div and float:left;.
    – Xareyo
    Commented Jul 18, 2013 at 13:08

7 Answers 7

Reset to default
5

Approach 1

Use float: left + clear: both.

HTML:

<div>
    <div class="float-left gutter-right">xx</div>
    <div class="float-left gutter-right">yy</div>
</div>
<div class="clear">zz</div>

CSS:

div.float-left { float: left; }
div.clear { clear: both; }

Explanation:

I used the class float-left of the first 2 divs so that they may come in one line. Then I add a class of .clear to the last div so that I could bring it in a seprate line where it will have no object floating neither left or right of it.

Demonstration 1.

Approach 2

Use display: inline.

HTML:

<div>
    <div class="float-left gutter-right inline">xx</div>
    <div class="float-left gutter-right inline">yy</div>
</div>
<div class="clear">zz</div>

CSS:

div.inline { display: inline; }

Explanation:

I have added a class .inline to the first 2 divs and applied the style display: inline to this class and so those two first div will be displayed inline and then you don't need to clear:both the last div.

Demonstration 2.

Improve this answer
2

Use float:left; to the float-left class, and clear: both; to the bottom div

The html:

<div class="float-left gutter-right">
   xx
</div>
<div class="float-left gutter-right">
    yy
</div>
<div id="bellow">
    zz
</div>

The css

.float-left {width: 50%; float: left;}
#bellow { clear: both;}
Improve this answer
1

Depends of the implementation of your float-left class. You need some clearing to get zz under xx and yy.

Improve this answer
1

CSS

div div:first-child{
    float:left;

}
Improve this answer
1

It seems that you are using float:left on the DIVs that you want to display next to each other, which is ok, but you have to make sure their widths combined is smaller than 100%, so they fit.

Try this:

HTML:

<div>
   <div class="inline-div">
      xx
   </div>
   <div class="inline-div">
      yy
   </div>
</div>
<div>
zz
</div>

CSS

.inline-div {
    float:left;
    width:50%;
}

See the fiddle here

Improve this answer
0 
<div>
    <div class="float-left gutter-right">xx</div>
    <div class="float-left gutter-right">yy</div>
    <div class="clear"></div>
</div>
<div>zz</div>

Then make ur css look like this

div.float-left { float: left; }
div.clear { clear: both; }
Improve this answer
0

This would also work, with any combination of selector and decleration. Add this to your CSS:

.gutter-right {
    display: inline;
}

or

.float-left {
   display: inline-block;
}
Improve this answer