By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,445 Members | 1,160 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,445 IT Pros & Developers. It's quick & easy.

Simple CSS layout woes

P: n/a
Hi all,

I'm learning CSS, and relearning HTML so I can build a website for myself, and I
was wondering if someone could help me with what seems like a simple layout that
I want to maintain no matter the browser window size. It would be much
appreciated. If you want to view it in your browser, please go to
http://homepages.ihug.com.au/~benst/index.html.

I've modified it a bit to make the edges of each segment more obvious.
Eventually I just want inner borders, with no border around the whole thing, but
the gap (see below) between the two top cells is going to spoil that.

In Mozilla 1.5 the borders overlap, and in IE 6.0 there is a gap between the
borders of the two top cells.

In Mozilla 1.5 the top left cell is not in the top left, as if the browser is
inserting <P> before the div. If I put some text before the first div it all
lines up properly in a nice grid. This is not needed in IE 6.0.
Here's the code:

<html>
<head>
<title>Home</title>
<link rel=stylesheet type="text/css" href="basic.css" title="Home">
</head>
<body>
<div id="heading">
<a class=heading href=index.html>Company Name</a>
</div>

<div id="sub-heading">
Products
</div>

<div id=menu>
<a class=menu href=products.html>products</a><br>
<a class=menu href=contact.html>contact us</a><br>
<a class=menu href=aboutus.html>about us</a><br>
<a class=menu href=news.html>news</a>
</div>

<div id=main>
Main content goes here
</div>

</body>
</html>

<!-- basic.css
body {
font-family: verdana, helvetiva, arial, sans-serif;
background: black;
padding: 0;
margin: 0;
color: #F0F050;
}

#heading {
float: left;

width: 10em;
height: 3em;

margin-top: 1em;
padding-top: 1em;

margin-left: 1em;
padding-left: 1em;

border: solid 2px #FFFF00;
color: #F00000;

font-weight: bold;
}

#sub-heading {
height: 3em;

margin-top: 1em;
padding-top: 1em;

margin-left: 12em;
padding-left: 1em;

border: solid 2px #FF0000;

color: #F00000;

font-weight: bold;
}

#menu {
float: left;

width: 10em;
height: 100%;

padding-top: 1em;

margin-left: 1em;
padding-left: 1em;

border: solid 2px #00FF00;

color: #F0F050;
}

#main {
padding-top: 1em;

margin-left: 12em;
padding-left: 1em;

border: solid 2px #4040FF;

color: #F0F050;
}

-->
Thanks heaps for all replies.

--
Ben Thomas
Melbourne
Australia
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Hi, BenOne

Try 2 things:
* specify a doctype like <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
* float #sub-heading and #main to the right

Here is some code I slapped together to show an example. Lemme know if
there is anything else.

Regards
Arno Bean

<!-- ------------------------------ -->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Home</title>
<style type="text/css">
body
{
background-color: #000;
color: #fff;
margin: 0;
padding: 0;
}

#heading, #menu
{
width: 25%;
float: left;
border: 1px solid red;
}
#sub-heading, #main
{
width: 74.5%;
float: right;
border: 1px solid #f0f;
}
a
{
color: #ffc;
}
</style>
</head>
<body>
<div id="heading">
<a class=heading href=index.html>Company Name</a>
</div>

<div id="sub-heading">
Products
</div>

<div id=menu>
<a class=menu href=products.html>products</a><br>
<a class=menu href=contact.html>contact us</a><br>
<a class=menu href=aboutus.html>about us</a><br>
<a class=menu href=news.html>news</a>
</div>

<div id=main>
Main content goes here
</div>

</body>
</html>
BenOne© wrote:
Hi all,

I'm learning CSS, and relearning HTML so I can build a website for
myself, and I
was wondering if someone could help me with what seems like a simple
layout that I want to maintain no matter the browser window size. It
would be much appreciated. If you want to view it in your browser,
please go to
http://homepages.ihug.com.au/~benst/index.html.

I've modified it a bit to make the edges of each segment more obvious.
Eventually I just want inner borders, with no border around the whole
thing, but the gap (see below) between the two top cells is going to
spoil that.

In Mozilla 1.5 the borders overlap, and in IE 6.0 there is a gap between
the borders of the two top cells.

In Mozilla 1.5 the top left cell is not in the top left, as if the
browser is inserting <P> before the div. If I put some text before the
first div it all lines up properly in a nice grid. This is not needed in
IE 6.0.
Here's the code:

<html>
<head>
<title>Home</title>
<link rel=stylesheet type="text/css" href="basic.css" title="Home">
</head>
<body>
<div id="heading">
<a class=heading href=index.html>Company Name</a>
</div>

<div id="sub-heading">
Products
</div>

<div id=menu>
<a class=menu href=products.html>products</a><br>
<a class=menu href=contact.html>contact us</a><br>
<a class=menu href=aboutus.html>about us</a><br>
<a class=menu href=news.html>news</a>
</div>

<div id=main>
Main content goes here
</div>

</body>
</html>

<!-- basic.css
body {
font-family: verdana, helvetiva, arial, sans-serif;
background: black;
padding: 0;
margin: 0;
color: #F0F050;
}

#heading {
float: left;

width: 10em;
height: 3em;

margin-top: 1em;
padding-top: 1em;

margin-left: 1em;
padding-left: 1em;

border: solid 2px #FFFF00;
color: #F00000;

font-weight: bold;
}

#sub-heading {
height: 3em;

margin-top: 1em;
padding-top: 1em;

margin-left: 12em;
padding-left: 1em;

border: solid 2px #FF0000;

color: #F00000;

font-weight: bold;
}

#menu {
float: left;

width: 10em;
height: 100%;

padding-top: 1em;

margin-left: 1em;
padding-left: 1em;

border: solid 2px #00FF00;

color: #F0F050;
}

#main {
padding-top: 1em;

margin-left: 12em;
padding-left: 1em;

border: solid 2px #4040FF;

color: #F0F050;
}

-->
Thanks heaps for all replies.

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.