Ok, so though I'm not new to css, I wouldn't call myself an expert. I am trying to create a theme for a wordpress blog, and I wanted it to be full width website with margins on both side. Well, while I figured out how to do this, I'm thinking it may have affected the way the block elements in my content area behave. See, I want the website to be a max of 1280 width when fully expanded and a min. of 1024 when contracted with only the left column (it's a 2 column layout) doing the expanding. I don't know yet if this is feasible with just css, but by God, I'm going to find out.
Now for some reason my content section is comprised of a "conainer" div which holds 2 divs [upper and lower subcontainers] with each one holding 2 other divs side by side [test1-test4]. These divs as well as the container and the children are all supposed to be set to max-width of 1280 when summed together and 100% height. The problem is they won't stay inside there subcontainer. They spill out vertically out of the div. Almost like horizontally they are within the parent but vertically are by themselves. I wish I could explain better. Unfortunately for obvious reasons the site isn't live so all I can do is place code.
In any event thanks in advance to anyone who can help me out of this pickle. 
Here's my HTML:
HTML 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"></style>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrap">
<div id="header">
<div id="head_container">
<div id="logo"></div></div>
</div>
<div id="navbar">
<div id="navmenu">
<div id="navmenu ul">
<ul class="line_li">
<li>Link1</li>
<li>Link2</li>
<li>Link3</li>
</ul>
</div>
</div>
</div>
</div>
<!--HEADER ENDS HERE-->
<div id="container">
<div id="upper_subcontainer">
<div id="test4">test4</div>
<div id="test5">test5</div>
</div>
<div id="lower_subcontainer">
<div id="test2">test2</div>
<div id="test1">test1</div>
</div>
</div>
</div>
<!--FOOTER BEGINS HERE-->
<div id="footer_tbar"></div>
<div id="footer"></div>
<div id="footer2_tbar"></div>
<div id="footer_2">
<div id="footer2_fx"></div>
</div>
</div>
</body>
</html>
and Here's the CSS:
HTML Code:
@charset "UTF-8";
/* CSS Document */
body
{
background-color: #000000;
margin: 0;
padding: 0;
}
#wrap
{
background-color: Blue;
width: 100%;
height: 100%;
}
#header
{
float: left;
background-color: White;
width: 100%;
background-image: url(images/header_bckg_img.jpg);
height: 374px;
background-repeat: repeat-x;
}
#logo {
background-image: url(images/corallogo_03_03.png);
float: left;
height: 200px;
width: 500px;
margin-top: 35px;
margin-left: 35px;
}
#head_container {
height: 374px;
width: 1024px;
margin-right: auto;
margin-left: auto;
}
#navbar {
float: left;
background-color: #00FF99;
width: 100%;
background-image: url(images/navbar_bckg_img.jpg);
height: 96px;
background-repeat: repeat-x;
}
#navmenu {
height: 60px;
width: 1024px;
margin-right: auto;
margin-left: auto;
#container
{
background-color: Green;
float: left;
width: 100%;
height: 100%;
background-image: url(images/content_bckg_img.jpg);
background-repeat: repeat;
}
#body_wrap {
height: 100%;
min-width: 1024px;
margin-top: 20px;
margin-right: auto;
margin-left: auto;
margin-bottom: 40px;
position: relative;
border: thick solid #00CC66;
width: 100%;
clear: both;
}
#rsstabs {
height: 90px;
width: 419px;
float: right;
}
#fixedBody
{
width: 603px;
min-width: 571px;
height: 500px;
float: left;
background-color: #666666;
}
#sidebar {
height: 700px;
width: 419px;
min-width: 419px;
background-color: #666666;
float: right;
border-left-width: 1px;
border-left-style: solid;
border-left-color: #003366;
}
#sidewidgets {
height: 650px;
width: 455px;
background-color: #333333;
float: left;
}
#footer
{
float: left;
background-color: Red;
width: 100%;
background-image: url(images/footer_bckg_img.jpg);
background-repeat: repeat-x;
height: 274px;
clear: both;
}
#footer_2
{
clear: both;
float: left;
background-color: Red;
width: 100%;
background-repeat: repeat-x;
height: 185px;
background-image: url(images/footer2_bckg_img.jpg);
}
#footer2_fx {
height: 174px;
width: 825px;
background-image: url(images/ftr2_fx_img.png);
margin-right: auto;
margin-left: auto;
clear: both;
}
#footer_tbar {
height: 7px;
width: 100%;
background-image: url(images/ftr_tbar_bckg_img.jpg);
background-repeat: repeat-x;
background-color: #00CC00;
float: left;
clear: both;
}
#footer2_tbar {
height: 20px;
width: 100%;
float: left;
background-image: url(images/footer_bar2footer2_img.jpg);
}
#test1 {
float: right;
height: 600px;
width: 419px;
background-color: #000099;
position: relative;
}
#test3 {
height: 100%;
min-width: 604px;
max-width: 1280px;
margin-right: auto;
margin-left: auto;
background-color: #003300;
}
#test2 {
height: 500px;
min-width: 604px;
max-width: 861px;
float: left;
background-color: #009966;
position: relative;
}
#test4 {
float: left;
height: 150px;
min-width: 604px;
max-width: 861px;
background-color: #CCFF66;
position: relative;
}
#test5 {
float: right;
width: 419px;
height: 150px;
background-color: #00FFCC;
position: relative;
}
#upper_subcontainer {
background-color: #330033;
height: 150px;
width: 1280px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 40px;
position: relative;
}
#lower_subcontainer {
background-color: #330033;
height: 100%;
width: 1024px;
margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 40px;
position: relative;
clear: both;
}
Last edited by chrishirst; 12-06-2009 at 06:15 AM..
|
