CSS Layout Help — Make the gaps stop!

@cdxrevvvedDec 14.2002

Ok. Here is the url for the page :

~~[URL=http://cdxrevvved.mine.nu/web/ecommerce/testlayout2/test2.htm]~~PAGE LINK[/URL]

Now, I cant preview in any browsers right now (work) except netscape 4.7 and IE 5.5 … But when previewing in IE, I get these gaps in between my columns! They should line up properly with them totaling 100% width..

If you want the rest, just view the source on the page..

WHY are these gaps there and HOW do I make them go away? I’d hate to start using tables again… {grin}

The code is below…

CDXRevVveD

#positioned-element
{
background-color: red;
height: 115 px;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
z-index: 1
}

#positioned-element1
{
background-color: pink;
height: 20 px;
left: 0px;
position: absolute;
top: 115px;
width: 100%;
z-index: 2
}

#positioned-element2
{
background-color: blue;
height: 400 px;
left: 0 px;
position: absolute;
top: 135px;
width: 20%;
z-index: 3
}

#positioned-element3
{
background-color: white;
height: 400 px;
left: 20%;
position: absolute;
top: 135px;
width: 50%;
z-index: 4
}

#positioned-element4
{
background-color: gray;
height: 400 px;
left: 70%;
position: absolute;
top: 135px;
width: 30%;
z-index: 5
}

</style>

to post a comment

CSS

28 Comments(s) _↴

@Zach_ElfersDec 14.2002 — #In the <body> tag put <body marginheight="0" marginwidth="0" leftmargin="0" topmargin="0">. That will fix your problem.

@cdxrevvvedauthorDec 14.2002 — #Please, cover your ears, with such a simple solution, I am now going to scream at the top of my lungs... ?

Thanx for the help...

Also, how do i put a footer on my page using css? Ive seen it, but Im still way too new...

@Zach_ElfersDec 14.2002 — #What kind of footer? Please give some details.

@cdxrevvvedauthorDec 14.2002 — #basically a bar, 100% width, about 30 pixels tall, at the bottom of the page.. (after the 3 columns on the test page).. so far the only way I know to do it would limit the height of my 3 columns..

I just want a footer at the end of the 3 columns, going all the way across, bout 30 pixls tall or so...

I wouldnt think it would be so difficult.. at least with tables it wasnt.. ?

@Zach_ElfersDec 14.2002 — #<div style="width:100%;height:30px;position:relative;top:0px;left:0px;">Contents</div>

That would do it.

Don't worry about setting a height and width to divs. They will expand to fit the contents, unless you specify for them not to.

@cdxrevvvedauthorDec 14.2002 — #my only prob is its at the top of the page.... how do i make it the last element on the page.. I know the three columns in the middle with ALWAYS be of varying height, so I cant just say put the footer 30 pixels from the bottom, or can i?

[URL=http://cdxrevvved.mine.nu/web/ecommerce/testlayout2/test2.htm]CLICK FOR EXAMPLE[/URL]

@Zach_ElfersDec 14.2002 — #Use [B]position:absolute;top:1000000000000000000000000000000000000000000000000000000000000000px;left:0px;[/B]

NOTE: Do not really put all those zeros.[SIZE=1][/SIZE]

@StefanDec 14.2002 — #[i]Originally posted by cdxrevvved [/i]

If you want the rest, just view the source on the page..
[/QUOTE]

Ok did that and the first line caught my eye to begin with
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">[/QUOTE]

Where did you find that code?

It should be

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

or preferably

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

After that you should also add a charencoding to your page and default script and style language, leaving us with something like

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Style-Type" content="text/css">

Now we can rip out that proprietary crapcode you just added (marginheight="0" marginwidth="0" leftmargin="0" topmargin="0") as well as the 3 bogus meta declarations you use now.

Once you completed these steps you will have a valid base to stand on to which you can add your CSS to.

@StefanDec 14.2002 — #[i]Originally posted by cdxrevvved [/i]

[B]my only prob is its at the top of the page.... how do i make it the last element on the page.. I know the three columns in the middle with ALWAYS be of varying height, so I cant just say put the footer 30 pixels from the bottom, or can i?

[URL=http://cdxrevvved.mine.nu/web/ecommerce/testlayout2/test2.htm]CLICK FOR EXAMPLE[/URL] [/B][/QUOTE]

Yes, you can put them at the end, but you need to remake the entire CSS layout to not rely on positioned elements for it's main content.

I'll help you with that if you like when after you fix the other problems.

@cdxrevvvedauthorDec 14.2002 — #The doctype came from using a wysiwyg css editor, layoutmaster or something.. its a companion prog to stylemaster.. just downloaded that last nite to try it out

@cdxrevvvedauthorDec 14.2002 — #Ok.. so i changed the doctype , dropped the body margin, etc, now everything has the gaps again.... so how would I do it?

@StefanDec 14.2002 — #[i]Originally posted by cdxrevvved [/i]

[B]Ok.. so i changed the doctype , dropped the body margin, etc, now everything has the gaps again.... so how would I do it? [/B][/QUOTE]

body {margin:0;}

@cdxrevvvedauthorDec 14.2002 — #Ok... now i see... Im doing my best to stay away from tables...

But now, how would I go about doing the footer, its still at the wrong end of the screen.. ?

BTW, thanx for putting up with me.... We are all newbies at soemthing...

@Zach_ElfersDec 14.2002 — #Cut and Paste your footer to the bottom of the HTML coding. Right now it is the topmost element. This won't completely fix your problem though.

@StefanDec 14.2002 — #[i]Originally posted by cdxrevvved [/i]

But now, how would I go about doing the footer, its still at the wrong end of the screen.. ?
[/QUOTE]

Try something like this ?

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Style-Type" content="text/css">

<title>Test Layout</title>

<style type="text/css" title="Default" media="screen">

body {background:white; margin:0; padding:0;}

#topbar {background:red; height:115px;}

#menu {background:#FFC0CB;}

#left {float:left; width:20%; background:blue; }

#right {float:right; width:30%; background:gray;}

#footer {background:yellow; clear:both;}

</style>

</head>

<body>

<div id="topbar">TOP BAR</div>

<div id="menu">menu bar</div>

<div id="left">left colum</div>

<div id="right">right column</div>

main content

<div id="footer">your footer</div>

</body>

</html>

Depending on exactly how you want the page to behave there are some variations on this theme you could use. But I would really need to see some real content on your page or a description of how it to be able to recomend something specific.

@cdxrevvvedauthorDec 14.2002 — #actually, it is the last bit of html, right before the </body> tag

@cdxrevvvedauthorDec 14.2002 — #actually, that worked awesome.. thanx to the both of ya..

just one more question.. what does the clear:both mean?

@StefanDec 14.2002 — #[i]Originally posted by cdxrevvved [/i]

just one more question.. what does the clear:both mean?[/QUOTE]

It ensures the left and right column doesn't overlap the footer in case they are longer then the main content.

Also, I'm almost sure this is not the Ultimate™ solution for you, but toy with it and complain about things that don't work as you would like it to and I'll show how to make it behave exactly as you like.

@cdxrevvvedauthorDec 14.2002 — #Ok.. been playing around.. and this is the "BASIC" layout.. got a lot more to do such as removing the tables from the left and right columns {grin}...

But thats the idea..

[URL=http://cdxrevvved.mine.nu/web/ecommerce/testlayout2/test4.php]Test Layout 4[/URL]

I think I'm well on my way tho.. Ignore the look / layout of the left and right columns content, those were copied and pasted from another test layout originally thrown together in 10 mins with tables...

If ya have any ideas / suggestions, please feel free to hollar at me.. ?

@StefanDec 14.2002 — #[i]Originally posted by cdxrevvved [/i]

I think I'm well on my way tho.. Ignore the look / layout of the left and right columns content, those were copied and pasted from another test layout originally thrown together in 10 mins with tables...

If ya have any ideas / suggestions, please feel free to hollar at me.. ? [/QUOTE]

Yepp, does seem like you are well into getting aquanted with CSS ?

A suggestion on the way from me would be that you make also a page with long center content and see what "happens". If you don't like how things behave it's better to decide on a layout that works more like you wold want it as soon as possible in the proces (since it cuts down on the extra work converting from one to the other).

And BTW, don't use stuff like

<center>

Use CSS instead ?

A few other tips

{background:white; background-image:url("../images/oldpaper.jpg");

can be written shorter as

{background:white url("../images/oldpaper.jpg");

Also you accidentally placed a - instead of : in

background-transparent;}

@cdxrevvvedauthorDec 15.2002 — #the <center> 's are there temporarily. Eventually all of that will be removed.. My goal is to do the site entirely with php and css combined, skipping out on as much html as possible.

Thx for pointing out the little helpers like the backgroudn transparent, etc.

And yeah, I'm going to go add some more center content here in just a little bit, so we will see if it still works... ?

@King_PellinoreDec 15.2002 — #Try this, it is a bit longer, but now you get your columns go the whole way (If you want background for them), independent of the content (the content will stay in the middle column):

[list]

[*]Leave the top bar and the menu as they are

[*]Leave the footer as it is

[*]Insert a DIV, called say "trunk" between the menu and the footer. Style it- background: blue; (Still using the first layout colours here for clarity)

[*]Insert DIV and call it like "gray_trunk" [i]inside[/i] the "trunk". Style: margin-left: 20%; backgound: gray;

[*]Insert DIV called "main_content" [i]inside[/i] the "gray_trunk". Style: margin-right: 30%; background: white.

[/list]

This will give you three columns. It will work as long as the content in the middle column is the longest.

But how do you insert content in the columns?

Here:
[list]

[*]You need to put the left column inside the "trunk". To do this, change the style of the trunk: position: relative; width: 100%.

Notes: "relative" is the same as "static", except that it creates a new reference system inside the object. So, when you absolutely position the "left_column", the position is going to be counted from the top left corner of the "trunk", not the main body. Also: you need to specify a dimension if you want the "relative" bit to work. That's why I used "width: 100%", though it's the default value.

[*]Insert "left_column" [i]inside[/i] "trunk". Style: position: absolute; width: 20%; top: 0px;

left: 0px.

[*]Do the same for the second menu. Note: it is to be placed inside the "grey_trunk", so change it's position: to relative as well, etc.

[/list]
(I saw this technique being used, when they tried to redesign WebRef main page with CSS.)

Here's my code:

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="Content-Script-Type" content="text/javascript">

<meta http-equiv="Content-Style-Type" content="text/css">

<title>Test Layout</title>

<style type="text/css" title="Default" media="screen">

body {

background: white;

margin: 0px;

padding: 0px;}

#topbar {

background: red;

height: 115px;}

#menu {background: #FFC0CB;}

#trunk {

position: relative;

width: 100%;

background: blue;}

#gray_trunk {

position: relative;

width: 100%;

margin-left: 20%;

background: gray;}

#main_content {

margin-right: 30%;

background: white;}

#left_column {

width: 20%;

position: absolute;

top: 0px;

left: 0px;}

#right_column {

width: 30%;

position: absolute;

top: 0px;

right: 0px;}

#footer {background: yellow;}

</style>

</head>

<body>

<div id="topbar">TOP BAR</div>

<div id="menu">menu bar</div>

<div id="trunk">

<div id="left_column">left column</div>

<div id="gray_trunk">

<div id="main_content">

main content<BR>more<BR>more<BR>more<BR>more<BR>more<BR>more<BR>more

</div>

<div id="right_column">right column</div>

</div>

</div>

<div id="footer">your footer</div>

</body>

</html>

____________
damn, all the indentation's gone

@cdxrevvvedauthorDec 15.2002 — #Interesting approach, and this may work, so long as I follow your advice and keep the center column the longest.. I'll start formatting and exerimenting here in a bit.. thx!

@cdxrevvvedauthorDec 15.2002 — #Using the approach above, with the trunk script (which I will cal it from now on), here it is for anyone interested...

[URL=http://cdxrevvved.mine.nu/web/ecommerce/testlayout2/test5.php]Angels Things Test Layout[/URL]

THe code has a TON of cleanup to be done, mostly in the PHP sections which are combined with regular html tables to parse the database, to pull the information.. Thats the biggest thing, is everything on the right is dynamically pulled and arranged into neat columns, which I now need to do somehow in css.. As i said, I dont want any tables in my code anymore..

And just a furthur note, thanks for all the help you guys. Half the other boards I would post on, they would tell me to go rtfm... ?

@StefanDec 15.2002 — #[i]Originally posted by King Pellinore [/i]

#gray_trunk {

position: relative;

width: 100%;

margin-left: 20%;

background: gray;}
[/QUOTE]

This will force a horizontal scrollbar in all nonbuggy browsers AT ALL RESOLUTIONS since you are making the page 120% = 1.2x the width of the screen.

I'd recomend you to upgrade that old buggy IE 5.x to IE 6 as well as download Opera 7b and eg Mozilla 1.2.1..

That way you would notice such logical errors in your code ?

@cdxrevvvedauthorDec 15.2002 — #well, to make it worse, here at work, with ie 5.5, it looks awesome.. but i dont have any other browsers to test it on.. and cant download anything.. so, i'll look at it when I get home and go from there...

@King_PellinoreDec 15.2002 — #[i]Originally posted by Stefan [/i]

This will force a horizontal scrollbar in [b]all nonbuggy browsers[/b]...[/QUOTE]

What's a nonbuggy browser?

(Amaya maybe)

Yeah, I know, my IE5.5 treats the percentages differently. But this is a fixable flaw.

@StefanDec 15.2002 — #[i]Originally posted by King Pellinore [/i]

[B]What's a nonbuggy browser?

[/QUOTE]

In regard to getting margins correctly?

ALL browsers except IE/Win 5.x (even IE 6 and IE/Mac 5.x do as they are suposed to).

That is 60% of the browsers in use and a number that is also steadly increasing as more and more people upgrade their old crappy IE browser.

Also in #CSS _↴

Images and text Embedded HTML and CSS DIV lookup?

Success!

Help @cdxrevvved spread the word by sharing this article on Twitter...

Tweet This

CSS Layout Help — Make the gaps stop!

28 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS Layout Help — Make the gaps stop!

28 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

28 Comments(s) _↴

Also in #CSS _↴