3 replies [Last post]
vavroom
Offline
Enthusiast
Aotearoa / New Zealand
Last seen: 14 years 1 week ago
Aotearoa / New Zealand
Joined: 2003-07-19
Posts: 75
Points: 0

Hello all, it's been a loooong time I was here, among other things, a trans-oceanic move kept me busy for over half a year!

Anyway, to my problem. I have a really basic layout that I'm playing with, and while it's behaving ok in IE, Opera isn't doing what I want just now.

See it in action: http://bmee.net/test/basic_layout.html

I'll post the code below (stripping content).

Basically, I have a div (box) that contains the rest of the elements. then I have div (headers), no problem with that.

Then I have div (menus), which should display on the left, and div (content), which should show to the right of menus.

Finally, I have div (footer), which should be at the bottom of it all.

As I said, in IE, it works, no worries. In Opera, content gets displayed below menus, and footer gets displayed above content and to the right of menus.

It's not absolutely positioned, and I have assigned widths (I think), so that shouldn't be it.

Thoughts?

<style type="text/css">
body{
font-size:100%;
background-color:#F0F0F0;
}

p{
font-size:1em;
}


#box{
width:80%;
margin-right:auto;
margin-left:auto;
background-color:#F0F0F0;
position:relative;
}

#header{
background-color:#FFFFFF;
margin-bottom:0px;
padding:1em 1em 1em 1em;
}

#menus{
background-color:#F0F0F0;
width:200px;
float:left;
padding:10px 10px 10px 10px;
margin-right:10px;
margin-top:0px;
}

#content{
float:left;
background-color:#00CC66;
padding: 10px 10px 0px 10px;
width:300px;
}


.hide{
display:none;
}
</style>

</head>

<body>
<div id="box">

	<div id="header">
	<h1>header</h1>
	<!--Closing header div--></div>

	<div id="menus">
	<h2>menus</h2>
	<!--Closing menus div--></div>
	

	<div id="content">
	<h2>content</h2>
	<!--Closing content div--></div>
	
	<div id="footer">
	<h2>footer</h2>
	<!--Closing footer div--></div>

<!--Closing box div--></div>

</body>
</html>

Nic
"A community that excludes even one of its members is no community at all" - Dan Wilkins

vavroom
Offline
Enthusiast
Aotearoa / New Zealand
Last seen: 14 years 1 week ago
Aotearoa / New Zealand
Joined: 2003-07-19
Posts: 75
Points: 0

Opera and floating divs problem, help please?

Anyone?

Nic
"A community that excludes even one of its members is no community at all" - Dan Wilkins

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 day 14 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Opera and floating divs problem, help please?

Hi vavroom,
Welcome back,
When you float elements they need to have a width set so that other floated items can work out if they can fit beside it or drop below.

Now if you have a container set as a percentage such as box in your case you would be best of specifying the widths of the floated columns in percentages also. Don't forget to consider the margins etc. in your calculations.
You may find it easier to have a div inside each floated element and use padding on that instead of margin on the float.

Hope that helps

vavroom
Offline
Enthusiast
Aotearoa / New Zealand
Last seen: 14 years 1 week ago
Aotearoa / New Zealand
Joined: 2003-07-19
Posts: 75
Points: 0

Opera and floating divs problem, help please?

Thanks Tony,

Sorry for not getting back to you on this sooner.

I really rather wanted the menu section to remain fixed width, as if the page got "scrunched" so small things wouldn't work well.

Then I started thinking, perhaps if I set box in pixels instead of % it might work ok.

So that's what I did, and it looks like it just might work just fine. I'll have some work to do on it, but I think it'll work.

As for divs inside divs to use padding instead of margin... I had never thought of that :-0 My first thought on it though is that it'll just clutter the page with more divs than I really want. For some reason, I prefer to keep the stuff down to a minimum where I can Smile

Thanks for the heads up Wink

Nic
"A community that excludes even one of its members is no community at all" - Dan Wilkins