HTML/CSS Layout Help Please?

T

Tyler

New member
Hello. This is my live website...http://depetrify.com/index5.php.
So my problem is when I make it a smaller, the main_content div dissapears. I have no idea why. I remove the margin on that side and I think it started going a little further.
Also, if you have any tips for a dropdown nav bar leave them here :P


body {
background-color: white;

}

#wrapper {
background-color: black;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
border: 5px outset #333;
width: 70%;
height: 1000px;
}


#header {
background-color: #666;
float: top;
width: 100%;
height: 14%;
border-bottom: 3px solid #333;

}

#navigation_background {
background-color: #33CC00;
float: top;
width: 100%;
height: 4%;
border-bottom: 3px solid #333;
}

#content {
width: 100%;
height: 81.2%;
}

#main_content {
width: 60%;
height: 97%;
margin-top: 10px;
margin-left: 10px;

float: left;
background-color: #E0E0E0;
border: 3px outset #99FF00;
}

#sidebar {
width: 36%;
height: 97%;
margin: 10px;
float: right;


}

#sidebar1 {
float: right;
margin-top: 15px;
margin-bottom: px;
height: 15%;
width: 80%;
background-color: white;
border: 3px outset #99FF00;

}

#sidebar2 {
float: right;
margin-top: 15px;
margin-bottom: px;
height: 15%;
width: 80%;
background-color: white;
border: 3px outset #99FF00;

}

#sidebar3 {
float: right;
margin-top: 15px;
margin-bottom: 0px;
height: 15%;
width: 80%;
background-color: white;
border: 3px outset #99FF00;

}

#sidebar4 {
float: right;
margin-top: 15px;
margin-bottom: 0px;
height: 15%;
width: 80%;
background-color: white;
border: 3px outset #99FF00;

}

#sidebar5{
float: right;
margin-top: 15px;
margin-bottom: 0px;
height: 15%;
width: 80%;
background-color: white;
border: 3px outset #99FF00;

}
____________________________

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Depetrify...Welcome!</title>
<link rel="stylesheet" href="style5.css" type="text/css" />
</head>

<body>
<div id="wrapper" div>
<div id="header">
</div>
<div id="navigation_background">
</div>



<div id="content">
<div id="sidebar">
<div id="sidebar1">
</div>
<div id="sidebar2">
</div>
<div id="sidebar3">
</div>
<div id="sidebar4">
</div>
<div id="sidebar5">
</div>
</div>
<div id="main_content">

</div>
</div>

</div>


</body>
</html>
 
Add this to your wrapper's div style:

---> min-width: 900px; <----

It should look like this:

#wrapper {
background-color: black;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
border: 5px outset #333;
width: 70%;
height: 1000px;
min-width: 900px; // <----- add this
}
 
Add this to your wrapper's div style:

---> min-width: 900px; <----

It should look like this:

#wrapper {
background-color: black;
margin-top: 10px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
border: 5px outset #333;
width: 70%;
height: 1000px;
min-width: 900px; // <----- add this
}
 
Back
Top