CODEWITHSUNDEEP
htmlcss
Pavan Kumar
Pavan Kumar

Reputation: 1686

Unexpected height

I have created header in html/css. Unexpected height is coming in menuOne. How to get rid this height. clear:both also i have added. Anyone please suggest me where i did wrong.

HTML:

<div class="logo">
    <img src="http://dummyimage.com/140x60/000/fff" />
</div>
<div class="rightContent">
    <div class="menuOne">
        <div class="fLeft">LeftContent</div>
        <div class="fRight">RightContent</div>
        <div class="cBoth"></div>
    </div>
    <div class="menuTwo">Second menu will come here</div>
</div>

and CSS:

.fLeft {
    float:left
}
.fRight {
    float:right
}
.cBoth {
    clear:both
}
.logo {
    float:left;
    border:1px solid red
}
.rightContent {
    margin-left:150px;
    border:1px solid blue
}
.menuOne {
    background-color:#ccc
}
.menuTwo {
    background-color:#333;
    color:#fff
}

See fiddle: http://jsfiddle.net/fLZHq

Thanks

Upvotes: 0

Views: 163

Answers (3)

Aziz Shaikh
Aziz Shaikh

Reputation: 16524

Changing clear:both to clear:right fixes it.

.cBoth {
    clear:right;
}

Demo of first approach: http://jsfiddle.net/fLZHq/3/

clear:both pushes the element below all the previous floated elements (this includes the logo div in you case). Whereas clear:right only pushes it below the right-floated element which you want.

Second approach is to keep the clear:both but float your rightContent and remove the left margin, like this:

.rightContent {
    float:left;
    border:1px solid blue
}

Demo of second approach: http://jsfiddle.net/fLZHq/7/

Upvotes: 2

ethan
ethan

Reputation: 309

All the issues with css regarding the layout of the page can be found out with the 3d view available in Firefox.

You've used float left for image and didn't use float for the rightContent div. So, the image is overlapping your 'rightContent' div. Thats the reason you needed to give margin-left for the 'rightContent' div.

So, once you give float: left for the 'rightContent' div, the unexpected problem will be solved.

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20408

Try this

.rightContent {
    margin-left:150px;
    float: left;
    border:1px solid blue
}

Upvotes: 0

Related Questions