Wrapper question

colly_06 · 31-05-2010 6:34pm #1

Hi,

Ok so my question is, I have a container wrapper for the whole web page, When I insert a Body area div I then insert a body left and body right div like so,

<div id="BodyArea">
<div id="LeftBody"></div>
<div id="RightBody"></div>
</div>

I float the left div left and the right one right, but they both fall out of the wrapper, but if I insert a footer div they all go back into the wrapper.

Any thoughts?

Axwell · 31-05-2010 6:41pm

Post the CSS you are using with it

colly_06 · 31-05-2010 7:00pm

@charset "utf-8";
* {
	margin: 0px;
	padding: 0px;
}
#Wrapper {
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #FF0000;
	border-bottom-color: #FF0000;
	border-left-color: #FF0000;
}
#Wrapper #Header {
	height: 100px;
	width: 1200px;
	background-color: #FFFFFF;
}
#Wrapper #TopNav {
	height: 50px;
	margin-top: 15px;
	background-color: #0000FF;
}
#Wrapper #BodyArea {
	width: 1200px;
	margin-top: 20px;
}
#Wrapper #BodyArea #LeftBody {
	height: 900px;
	width: 800px;
	float: left;
}
#Wrapper #BodyArea #RightBody {
	height: 900px;
	width: 400px;
	float: right;
}

Pablod · 01-06-2010 11:12am

could you post up the html for the page?
Sound like it could be a missing width somewhere
will know better if you can throw up the html.
cheers

colly_06 · 01-06-2010 3:22pm

I think i've figured it out, but I'll post again if it causes trouble again.

colly_06 · 02-06-2010 7:57pm

It's come up again, must be doing something wrong, here's the html and css,
thanks.

<!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=utf-8" />
<title>Untitled Document</title>
<link href="layout.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
	background-color: #EEEEEE;
}
.style1 {font-family: "Bleeding Cowboys"}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
-->
</style>
</head>

<body>
<div id="wrapper">
  <div id="Logo">Logo Image</div>
  <div id="topnav">
    <ul>
      <li><a href="Untitled-1.html" class="style1">Home</a></li>
      <li><a href="Untitled-1.html" class="style1">Contact</a></li>
      <li><a href="Untitled-1.html" class="style1">Posters</a></li>
      <li><a href="Untitled-1.html" class="style1">Forum</a></li>
      <li><a href="Untitled-1.html" class="style1">Contact</a></li>
    </ul>
  </div>
  <div id="BodyArea">
    <div id="LeftNav">Conten for id''LeftNav'' Goes Here</div>
       <div id="MainBody">Content for  id "MainBody" Goes Here</div>
  </div>
</div>
</body>
</html>

@charset "utf-8";
* {
	margin: 0px;
	padding: 0px;
}
#wrapper {
	height: auto;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: none;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-right-color: #CC0066;
	border-bottom-color: #CC0066;
	border-left-color: #CC0066;
}
#wrapper #Logo {
	padding: 0px;
	height: 100px;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	background-color: #999999;
}
#wrapper #topnav {
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	height: auto;
	width: 1200px;
}
#wrapper #BodyArea {
	height: auto;
	width: 1200px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 20px;
}
#wrapper #BodyArea #LeftNav {
	width: 180px;
	float: left;
	height: auto;
}
#wrapper #BodyArea #MainBody {
	width: 1020px;
	float: right;
}


ul {
	list-style-type: none;
	margin: 0px;
	padding: 0px;
	overflow: hidden;
}
li {
	float: left;
}
a {
	display: block;
	width: 240px;
	background-color: #0099FF;
	text-align: center;
	font-size: 36px;
	color: #000000;
}

a:hover,a:active {background-color:#00CCFF}

Pablod · 02-06-2010 8:23pm

Where are you adding the Rightbody?

Because your main container is 1200px width
Your left body is 180px and the mainbody 1020px that is your container width used
Also your Main body is floated right

colly_06 · 02-06-2010 8:33pm

Well I have Body Area, then in that is left nav and main body, I'm gonna put left and right in the main body. So for the moment I just have left nav at 180 and main body at 1020 in the Body Area of 1200. I've floated the left nav left, what should I be doing?

Pablod · 02-06-2010 8:47pm

drop a div in your main body (for your right body or right nav)
and style it with a seperate style

Don't give it the same style as you have been following
i.e. #Wrapper #BodyArea #RightNav
call it #RightNav or something along those lines

Could be wrong but I think your floats maybe overlapping
Maybe try setting up your #Leftnav & #Rightnav divs as seperate styles.

colly_06 · 02-06-2010 9:52pm

Still not happening

Could you open it in dreamweaver and have a look?

Pablod · 02-06-2010 9:58pm

dont have dreamweaver

OK You have your #Bodyarea
and in there you have your #mainbody
So am i right in saying you want your #leftnav and #rightnav divs contained within the #mainbody (floating left and right respectively)
???

colly_06 · 02-06-2010 10:25pm

Yes, well I have

<wrapper>
<BodyArea><LeftNav></Div>
<MainBody></Div>
</Div>
</Div>

Body Area = 1200 and then inside that I want left nav on the left and Main Body on the right, want them side by side. I then float both left and the whole body area div containing leftnav and mainbody falls out of the main wrapper.

Pablod · 02-06-2010 10:38pm

them divs only pop out of the wrapper in IE8, look ok in IE7/Firefox

Try adding a couple of line breaks after your

<div id="BodyArea">
    <div id="LeftNav">Conten for id''LeftNav'' Goes Here</div>
       <div id="MainBody">Content for  id "MainBody" Goes Here</div>
   <br />
   <br />
   <br />
   <br />

just temporarily, and it looks ok, then if you are adding a footer to your page, clear both floats and this should help contain the page.

colly_06 · 02-06-2010 10:40pm

Ok, thanks a lot man.

colly_06 · 03-06-2010 12:42am

I've just watched a tutorial which shows that I definitely need a footer to keep the body area in the wrapper.

Thanks.

jebuz · 03-06-2010 10:20am

Hi there, try this, it's worked for me in the past when trying to float DIV's in a parent container. More info on the CSS "clear" property.

[HTML]
<div id="BodyArea">
<div id="LeftNav">Conten for id''LeftNav'' Goes Here</div>
<div id="MainBody">Content for id "MainBody" Goes Here</div>
// ADD THIS LINE
<br style="clear:both;">
</div>
[/HTML]

colly_06 · 03-06-2010 3:29pm

jebuz wrote: »

Hi there, try this, it's worked for me in the past when trying to float DIV's in a parent container. More info on the CSS "clear" property.

[HTML]
<div id="BodyArea">
<div id="LeftNav">Conten for id''LeftNav'' Goes Here</div>
<div id="MainBody">Content for id "MainBody" Goes Here</div>
// ADD THIS LINE
<br style="clear:both;">
</div>
[/HTML]

Worked a treat, thank you!

Wrapper question

Comments