...

View Full Version : 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




<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
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 (http://www.quirksmode.org/css/clearing.html) to see how that works.


<!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
Hello EnfantSauvage,
You need to clear your floats.
Add overflow:auto; to your #outside_wrapper. Have a look at this page (http://www.quirksmode.org/css/clearing.html) to see how that works.

Thank you very much, that solved my problem.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum