Problem with bottom margin

EnfantSauvage · 11-16-2010, 12:54 PM

I am building a web site where i have two inside wrappers centered on screen using an outside wrapper that has margin left/right auto.
The structure looks like this

Code:

<body>

<div id="outside_wrapper">

<div id="inside_wrapper"></div>
<div id="sidebar"></div>

</div>

</body>

#outside_wrapper {
	width: 993px;
	margin: 25px auto;
}

#inside_wrapper {
	width: 823px;
	height: auto;
	float: left;
}

#sidebar {
	height: auto;
	width: 155px;
	margin-top: 224px;
	float: left;
	margin-left: 7px;
}

I am successful in centering the inside_wrapper and the sidebar with the invisible outside_wrapper but I also want to have a bottom and top margin of 25 px.
And now the problem - the top margin works without any problem on any browser, but the bottom margin only works with Firefox. All the other browsers (IE 8 and 9beta, Chrome, Safari, Opera) do not recognize the bottom margin.

I managed to get a bottom margin by giving a concrete height to the outside_wrapper instead of auto but that solution is no good for me since I am building a dynamic gallery and the inside_wrapper changes height depending on the image opened inside it.
Does someone know of a solution to this problem?

abduraooft · 11-16-2010, 01:12 PM

Quote:

The structure looks like this

Can we have a link to your page? Or please post your complete HTML (including DOCTYPE)+CSS

Excavator · 11-16-2010, 01:16 PM

Hello EnfantSauvage,
You need to clear your floats.
Add overflow:auto; to your #outside_wrapper. Have a look at this page to see how that works.

Code:

 <!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>
<style type="text/css">
#outside_wrapper {
	width: 993px;
	margin: 25px auto;
	overflow: auto;
	background: #ff0; /*for demonstration only*/
}
#inside_wrapper {
	width: 823px;
	float: left;
	background: #00f;
}
#sidebar {
	margin: 225px 0 0 830px;
	background: #f00;
}
</style>
</head>
<body>
    <div id="outside_wrapper">
        <div id="inside_wrapper">some site goes here</div>
        <div id="sidebar">some menu goes here</div>
    </div>
</body>
</html>

EnfantSauvage · 11-16-2010, 01:25 PM

Quote:

Originally Posted by Excavator

Hello EnfantSauvage,
You need to clear your floats.
Add overflow:auto; to your #outside_wrapper. Have a look at this page to see how that works.

Thank you very much, that solved my problem.