/    Sign up×
Community /Pin to ProfileBookmark

div float left layer overlaps go byond the parent div

Copy linkTweet thisAlerts:
May 09.2008

I am creating a webpage with css. this is my first time to use full css based technique.
this is my code

[code=html]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>PC 4 Safe</title>
<link href=”css/page.css” rel=”stylesheet” type=”text/css” />
</head>

<body>
<div id=”outerWrapper”>
<div id=”banner”></div>
<ul id=”menu”>
<li><img src=”img/gen/menu_left_i.gif” align=”left”; /></li>
<li><a href=”#”><b>HOME</b></a></li>
<li><a href=”#”><b>CONTACT US</b></a></li>
<li><a href=”#”><b>ABOUT US</b></a></li>
<li><a href=”#”><b>HELP</b></a></li>
</ul>
<div id=”wrapper1″>
<div>
<div id=”leftPane”>
left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />
</div>
body<br />body<br />body<br />body<br />body<br />
</div>
</div>
<div id=”footer”>footer<br />footer<br />footer<br />footer<br /></div>
</div>
</body>
</html>
[/code]

My CSS code..

[CODE]
/* CSS Document */

body{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:80%;
color: #333333;
margin: 0px;
padding: 0px;
background:url(../img/gen/striped_bg_i.jpg) repeat 0 0;
text-align:center;
}

#outerWrapper {
width:900px;
margin:0 auto;
background:url(../img/gen/footer_bg_i.gif) repeat-x left bottom #efefef;
}
#wrapper1 {
margin:0px 11px 0px 11px;
background:url(../img/gen/bodybottom.gif) left bottom no-repeat #FFFFFF;
}
#leftPane {
width:200px;
float:left;
background-color:#00CC66;
margin:0px;
clear:none;
padding:2px;
}
#banner {
width:900px;
background:url(../img/gen/banner_bottom_curve.gif) no-repeat left bottom #333333;
height:70px;
margin-bottom:3px;
}

#menu
{
background:url(../img/gen/menu_out_i.gif) repeat-x 0% 0%;
position:relative;
margin:0px;
height:36px;
list-style:none;
padding-left:10px;
}
#menu li
{
float:left;
display:inline;
}
#menu a
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
float:left;
display:block;
color:#fff;
padding:0 10px 0 10px;
line-height:36px;
height:36px;
text-align:center;
text-decoration:none;
color:#FF6600;
border-left:1px #000000 solid;
}
#menu a:hover
{
background:url(../img/gen/menu_over_i.gif) repeat-x 0% 0%;
color:#FF9900;
text-decoration:none;
}
#menu a b
{
height:36px;
}
#footer {
min-height:70px;
}
[/CODE]

my left pane comes out from the parent div box. i want the parent div to grow according to the size of the left pane.

what is wrong in my code? can anyone give me a soLutions pLease?

[upl-file uuid=b3a1618f-b917-42d1-b3bb-9f2a12a1a7a1 size=26kB]screesnhot.jpg[/upl-file]

to post a comment
CSS

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@CentauriMay 10.2008 — This is due to floats being taken out the the document flow, and the float needs to be "cleared" to force the container to surround it. At the moment, the surrounding container has no id or class assigned to target it. Also at the moment, if the leftPane is shorter that the body text, the body text will wrap below it. If you separate left and right, then the overflow method of clearing can be used on #wrapper1.

html:
[CODE] <div id="wrapper1">
<div id="leftPane">
left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />left pane<br />
</div>
<div id="rightPane">
body<br />body<br />body<br />body<br />body<br />
</div>
</div>[/CODE]
css:[CODE]#wrapper1 {
margin:0px 11px 0px 11px;
background:url(../img/gen/bodybottom.gif) left bottom no-repeat #FFFFFF;
[COLOR="Red"]overflow: hidden;[/COLOR]
}
#leftPane {
width:200px;
float:left;
background-color:#00CC66;
margin:0px;
clear:none;
padding:2px;
}
[COLOR="Red"]#rightPane {
margin-left: 204px;
padding: 2px;
}[/COLOR][/CODE]
Copy linkTweet thisAlerts:
@firebladeauthorMay 10.2008 — if i used this way...

if my right pane is longer than the left pan, then my left pan also automatically increase in width?

I want my left & right pane should be in same height although if the content is not balanced in both.

This will give me that?
Copy linkTweet thisAlerts:
@CentauriMay 10.2008 — No, you cannot force two divs to be equal height unless they are contained within another div that has a specific height set. as #wrapper1 needs to be fluid height, and therefore has a height of "auto", any attempt to force 100% height on any internal divs will result in them also inheriting the "auto" height. What you would want would be a faux column as a background to #wrapper1.
×

Success!

Help @fireblade spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...