nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

Wrapper question

colly_06

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?

Find more posts tagged with

Quick Links

Comments

Axwell

Post the CSS you are using with it

colly_06

@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

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

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

colly_06

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

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

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

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

Still not happening

Could you open it in dreamweaver and have a look?

Pablod

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

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

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

Ok, thanks a lot man.

colly_06

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

Thanks.

jebuz

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

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!