• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 389
  • Last Modified:

HTML & CSS Layout problem

Hi,

I'm, struggling to get my layout right for my website. It is a bit difficult to explain what I'm trying to do so I have created the following images to help me explain. If you look at the layout.jpg you will see how I am trying to get the layout to look by using Div tags. The Header will contain the top border. The example.jpg gives you an example of how it should look when it is finished.

I got it right to look as I want it to look, but there is one problem, when I want to add more content to the main content box I have to change the layout (especially the side border boxes) so the all the boxes fits together again. I do not want to set any fixed heights for the side borders or the main content box. As I add more content to the main content box it will grow in height and I want the side borders to do the same. This means that basically I want the side borders to fill any space next to the Navigation bar and the main content, but I just don't seem to be able to get it right.

I hope that I have given you enough detail on what I am trying to do, but if I haven't just let me know and I will try again. ;)

Oh, there is just one thing... I want to do the layout with Div tags and CSS. :)

Can anyone help me to get this right?
Layout.jpg
Example.jpg
0
Ruan1618
Asked:
Ruan1618
3 Solutions
 
JuamezCommented:
It's easy, in the css code you have to set the background image of the sideborder div to repeat on the y-axis, like this:

.sidecontentleft
{
background-image: url('sidecontent-left.jpg');
background-repeat: repeat-y;
}
.sidecontentright
{
background-image: url('sidecontent-right.jpg');
background-repeat: repeat-y;
}
0
 
Ruan1618Author Commented:
Hi, thanks for the quick response! :-)

Yes, but that doesn't solve the problem. The background will fill the entire .sidecontentleft box, but my problem is not setting a background for the box. The problem comes in with the height of the side border box, the height can not be fixed. If the height is not fixed and the .sidecontentleft box does not have any content (besides the background image that is set to repeat-y) the box will not display at all which does not solve my problem. :-/
0
 
the_billCommented:
Float everything to the left
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
JuamezCommented:
I have created the following HTML and CSS code that apply your wishes, added as a code snippet.

The trick is having the positioning of the side divs set up as absolute, while the positioning of the enveloping div is set to relative. Then the side bars are set to position themselves at 0px from the bottom, and the height of 100% helps to get them achieve maximum height.

My solution is based on this helpful article: http://raincitystudios.com/blogs-and-pods/hubert/equal-height-columns-with-css
<html>
<head>
	<style>
		html { font-size: 1em; width: 700px; margin: 0 auto; }
		body > div { position: relative; }
		div#layer1 { border: 1px black solid; }
		div#layer2 { border: 1px darkgrey solid; }
		div#layer3 { border: 1px lightgrey solid; }
		div#header { width: auto; height: 200px; content: "header"; font-size: 200%; border: 1px green solid; margin: 0 42px; }
		div#maincontent { width: auto; height: 500px; border: 1px yellow solid; margin: 0 42px; content: "main"; }
		div#footer { width: auto; height: 100px; border: 1px red solid; margin: 0 42px; content: "footer"; }
		div.corner { height: 40px; width: 40px; border: 1px orange solid; }
		div.side { height: 100%; width: 40px; border: 1px blue solid; position: absolute; bottom: 0; background-color: red; }
		div.left { position: absolute; left: 0; float: left; }
		div.right { position: absolute; right: 0; float: right; }
		div.upper { position: absolute; bottom: 0; }
		div.lower { position: absolute; top: 0; }
	</style>
</head>
<body>
	<div id="layer1">
		<div class="upper left corner">
		</div>
		<div id="header">
		</div>
		<div class="upper right corner">
		</div>
	</div>
	<div id="layer2">
		<div class="left side">
		</div>
		<div id="maincontent">
		</div>
		<div class="right side">
		</div>
	</div>
	<div id="layer3">
		<div class="lower left corner">
		</div>
		<div id="footer">
		</div>
		<div class="lower right corner">
		</div>
	</div>
</body>
</html>
</html>

Open in new window

0
 
Ruan1618Author Commented:
Hi!

At the moment I am floating everything to the left and it is not helping. I have to find some way to side borders act like a spring, the more space there is the more space it will fill (but only for the height).
0
 
Ruan1618Author Commented:
Hi Juamez,

Thanks very much, that was the thing I was looking for. This is really a new way to look at div tags and CSS for me. :) There is one problem with the solution though. If I open it in internet explorer the layout seems to be corrupted and that causes another problem. :-/ When I run it in Firefox I don't have any problems, but it can not be browser specific. Any ideas?
0
 
JuamezCommented:
When IE doesn't see a DOCTYPE at the top of the HTML document, it behaves weirdly. So if you just put something like this _above_ the <html> tag, then all should be well (just tested this myself in IE8):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

So the snippet actually should have been like this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<style>
		html { font-size: 1em; width: 700px; margin: 0 auto; }
		body > div { position: relative; }
		div#layer1 { border: 1px black solid; }
		div#layer2 { border: 1px darkgrey solid; }
		div#layer3 { border: 1px lightgrey solid; }
		div#header { width: auto; height: 200px; content: "header"; font-size: 200%; border: 1px green solid; margin: 0 42px; }
		div#maincontent { width: auto; height: 500px; border: 1px yellow solid; margin: 0 42px; content: "main"; }
		div#footer { width: auto; height: 100px; border: 1px red solid; margin: 0 42px; content: "footer"; }
		div.corner { height: 40px; width: 40px; border: 1px orange solid; }
		div.side { height: 100%; width: 40px; border: 1px blue solid; position: absolute; bottom: 0; background-color: red; }
		div.left { position: absolute; left: 0; float: left; }
		div.right { position: absolute; right: 0; float: right; }
		div.upper { position: absolute; bottom: 0; }
		div.lower { position: absolute; top: 0; }
	</style>
</head>
<body>
	<div id="layer1">
		<div class="upper left corner">
		</div>
		<div id="header">
		</div>
		<div class="upper right corner">
		</div>
	</div>
	<div id="layer2">
		<div class="left side">
		</div>
		<div id="maincontent">
		</div>
		<div class="right side">
		</div>
	</div>
	<div id="layer3">
		<div class="lower left corner">
		</div>
		<div id="footer">
		</div>
		<div class="lower right corner">
		</div>
	</div>
</body>
</html>

Open in new window

0
 
Ruan1618Author Commented:
Hi,

Thanks, that is a good thing to know. I have put the DOCTYPE in an it works! yey! Thanks for all your help. It seems like you know a lot about HTML Div tags and CSS, think I need a bit more reading on this subject. :)

Thanks again!
0
 
Dave BaldwinFixer of ProblemsCommented:
If you're not going to put any content in the side sections, you don't need to go thru all of this.  The background behind the content needs only a top section, a main section behind the content, and a bottom section.  Typically the main section background is just a small slice less than 100px high but full width.  The actual content section is overlaid and centered on the main background.
I've attached some code that demonstrates the method I've used before.  The DOC-Type at the top is important if you want it to work with IE6-8.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS-DIV</title>
<style type="text/css">
<!-- 
body { 
	background-color: #ddeeff;
	margin: 0;
	padding: 0;
	}
A { 
	font-family: Arial;
	color: #ffffff;
	text-decoration: none; } 
A:link { color: #ffffff; text-decoration: none; }
A:visited { color: #ffffff; text-decoration: none; }
A:hover {color: #ffdd99;text-decoration: underline;}

#wrap {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
	background-color: #dfdfdf;
	}	 
#header {
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	background-color: #aaccff;
	}	
#cntwrap {
	width: 100%;
	margin: 0;
	background-color: #aaffaa;
	}
#cnttop {
	width: 100%;
	height: 75px;
	margin: 0;
	border: 1px solid #000000;
	background-color: #aaffaa;
	}
#cntbot {
	width: 100%;
	height: 75px;
	margin: 0;
	border: 1px solid #000000;
	background-color: #aaffaa;
	}
#content {
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	background-color: #ffffff;
	border: thin solid #eeaa77;
	}	
#tnav {
	width: 100%;
	background-color: #000000;
	color: #ffeecc;
	}
#tnav-inside {
	padding-left: 5px;
	padding-right: 5px;
	background-color: #000000;
	color: #ffeecc;
	}
#footer {
	width: 750px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	background-color: #ffaacc;
	}	
h1, h2, h3, h4 {
	margin: 0;
	padding: 0;
	}
-->
</style>
</head>
<body>
<div id="wrap">

<div id="header"><h1 align="center">Header</h1>
</div>

<div id="cnttop">top</div>

<div id="cntwrap">
<div id="content">
<div id="topnav">
<div id="tnav-inside"><a href="#">Home</a></div>
</div>
<h2 align="center">Content</h2>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h3 align="center">Content Bottom</h3>
</div>
</div>

<div id="cntbot">bot</div>


<div id="footer"><h2 align="center">Footer</h2>
</div>
</div>

</body>
</html>

Open in new window

0
 
Ruan1618Author Commented:
Hi DaveBaldwin,

Thanks for your response! Your solutions also helps a lot. :)
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now