# CSS Layout Problem



## lora_3677 (Aug 4, 2003)

Ok, I have played with CSS enough to be dangerous. I got the styles down, I'm tackling layouts now. I ripped both of the pieces from tutorial sites and I'm trying to combine them to work for what I want.

I have a basic page with a header, nav, footer (which isn't exactly working, but may once I get the other problem fixed), and main content divs. Inside the main content I have 4 content boxes so I can control some stuff. The first content box i have set leftmargin 20% and then 100 px wide. It is begining at the left side of the page, instead of skipping to the 20% point of the page. WHY?? I have changed the % to px, I've played with the the numbers and it just is not changing. It insists to start at the left side of the page. In the HTML page I have the header div, then the navigation div, then i have the 4 content boxes. Tried it within and outside the Inhalt div (main region) to make the .leftcontent move to where it needs to be and it won't move....  :confused

Here is the CSS:

.box {
background: #FFFFFF; /*this is a box where the bottom-navigation and the copyright will be placed*/
border-color: #48D1CC;
border-style: groove;
border-width: 2px;
color: #000099;
font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
font-size: 12px;
margin: 2px;
padding: 2px;
}

.Inhalt p {
max-width: 650px;
}

.Header {
margin-left: 160px;
margin-top: 10px;
}

.Inhalt {
background: #FFFFFF; 
color: #003366;
font-family: Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
margin-left: 160px; /*to position the content area to the right of the navigation*/
margin-right: 20px; /*breathing space for the text*/
margin-top: 60px;
max-width: 770px; /*readbility even on big screens*/
padding: 5px; /*space to separate navigation and content*/
width: auto;
}

.navbox {
background-color: #003366;
border-color: #FF6633;
border-style: groove;
border-width: 2px;
color: #FFFFFF;
font-family: Arial, Tahoma, Verdana, Helvetica, sans-serif;
font-size: 15px; /*some button-like boxes for the left-side navigation*/
margin: 2px;
padding: 2px;
}

.Navigation {
font-family: Verdana, Eyechart, Geneva, Arial, Helvetica, sans-serif;
height: auto;
left: 3px;
line-height: 110%; /*line-height set to 110% in order to have the navigation elements better separated*/
position: absolute; /*The navigation on the left side, positioned absolutely*/
top: 105px;
width: 135px;
}

.oldbrowser {
display: none;
}

.leftcontent {
position: absolute;
left:20%;
width:20%;
top:50px;
background:#fff;
}

.centerleftcontent {
position: absolute;
left:42%;
width:20%;
top:50px;
background:#fff;
}

.centerrightcontent {
position: absolute;
left:64%;
width:20%;
top:50px;
background:#fff;
}

.rightcontent {
position: absolute;
left:86%;
width:20%;
top:50px;
background:#fff;
}	
.rightcontent, .centerrightcontent, .centerleftcontent, .leftcontent {
border:1px solid #000;
}


----------



## Gibble (Oct 10, 2001)

Paste your HTML too please


----------



## lora_3677 (Aug 4, 2003)

New Page 1












Link 1
Link 2
Link 3


Some text here, like:blah blah blah blah blah. the quick brown fox ran over the dead dog. hee hee.
my own version of the story. much more interesting i think.

*CONTENT, with the nested FOOTER box*

Now you have the full stylesheet in the heading section of this page.

Do i have to do this a million times before it makes sense? or do i have to grab the right book and hope for the best?

To do that you can use the fact that NN 4.xx does not accept the @import.
Therefore you link two style sheets:
<link rel="stylesheet" href="StyleNN.css"
type="text/css">
<style type="text/css">
@import url(Style.css); /*IE and NN6x styles*/
</style>

Explanation: NN<6 does not recognize the @import, so it uses the
<link> style sheet. IE and NN6 accept the @import, and by placing it
below the <link> style, you give it more importance, therefore IE and
NN6 will give you the styles in the @import sheet.

You have to remember to use the same selectors and properties in both style
sheets. If you declare a value in the linked stylesheet and omit this in the
imported sheet, IE will take the value from the linked sheet.

FOOTER BOX
This will be the secondary navigation


----------



## lora_3677 (Aug 4, 2003)

the html is what came off te tutorial site... for the most part.. i edited some of it to see if it was a size problem. ha ha.


----------



## lora_3677 (Aug 4, 2003)

i may have found the problem.... i took out my comment above the leftcontent and now it moves and works...... is that the wrong comment style????


----------



## lora_3677 (Aug 4, 2003)

Gibs...ok, so now all i need is the stupid footer to be a certain percentage or pixels below the longest of the content boxes... how do i make that happen?? can i use a negative percentage from the bottom or something??


----------



## Gibble (Oct 10, 2001)

Sorry, didn't get a chance to look at it...seems you got alot figured out 

Hmm...about the footer...let me check and see


----------



## Gibble (Oct 10, 2001)

To be quite honest I always have problems getting footers to display properly in multi column css layouts...

...you can set it's top to 95% but that may not always work as you want.


----------



## lora_3677 (Aug 4, 2003)

what do you think about using a style sheet like this... i found it on a web design company's site... found a link via google....but it's not linked anywhere
http://webctr.com/css-footer.html

does the relative positioning thing really work very well????


----------



## Rockn (Jul 29, 2001)

.box { 
position: whatever; 
bottom: 0px; 
left: 0px; 
} 
Might work


----------



## lora_3677 (Aug 4, 2003)

I think the problem is that the four content boxes can expand... they don't have a set bottom... so they are inside the content div.. and the footer is below the beginning of the content div, however the content boxes still overlap it because they have grown to compensate for the text... did that make sense at all???

maybe i should just stick this on my website on a test link so it would be easier to see... i'll do that. 
uploading to 
http://www.preciousgemscattery.netfirms.com/example.html

give me a few minutes.


----------



## Gibble (Oct 10, 2001)

> _Originally posted by lora_3677:_
> *I think the problem is that the four content boxes can expand... they don't have a set bottom... so they are inside the content div.. and the footer is below the beginning of the content div, however the content boxes still overlap it because they have grown to compensate for the text... did that make sense at all???
> 
> maybe i should just stick this on my website on a test link so it would be easier to see... i'll do that.
> ...


That is exactly the problem


----------



## lora_3677 (Aug 4, 2003)

ok, so the only way to fix THAT... is to give the boxes a set size?? maybe i'll just say FORGET THE FOOTER!!! lol...


----------



## lora_3677 (Aug 4, 2003)

scary that i'm totally understanding this stuff.... that tutorial i came across ROCKS!


----------



## Gibble (Oct 10, 2001)

CSS is quite simple once you get the hang of it, and yes, scrap the footer


----------



## lora_3677 (Aug 4, 2003)

ok, you didn't answer me on the relative thing... is relative positioning compatible across browser? do you know?? i haven't found anything that said it wasn't, but nothing has said it is, either...


----------



## Gibble (Oct 10, 2001)

> Notes in IE 4.0+:
> Absolute positioning does not work with inline elements, lists, and table cells
> If Absolute positioning is used you must specify the "top" and "left" properties
> Relative positioning does not work with table cells
> ...


----------



## lora_3677 (Aug 4, 2003)

Ok.. can anyone give me a little help... I have a page that is currently in table form that I want to convert to use CSS. I have all the other pages done, but when it comes to this one I am not sure how to get all the pictures, etc to layout correctly...

I have a table with 4 columns, column one is a menu, col 2 is a pic, col 3 is words, col 4 pic...
converting to a css layout with 3 columns. col 1 is the nav bar, col 2 is content, col 3 is small for little announcement on right side of page... 
in col 2 i want a left justified pic, centered text and right justified pic all in the same line or para... several times down the page..

here is the link to the old page using a table
http://www.preciousgemscattery.netfirms.com/kittens2.html


----------



## khaki (Jul 26, 2003)

Hey LO... I thought that you already had this worked out


----------



## khaki (Jul 26, 2003)

my bad...
that was a different page that you fixed.
This one is different... i see that now.

I'll give it a shot and see what I can come up with


----------



## lora_3677 (Aug 4, 2003)

yeah, i have like 15 freaking pages now on this site.... I need to downsize. LOL!!

i may have came up with a plan to get it to work, but it's not the best way... NO, it's not a table... but i put everything in paras and aligned them left and right.... not sure what NN will do with that... but it looks ok in IE... LOL!!!


----------



## khaki (Jul 26, 2003)

well give me the link.... cuz your last page didn't really look the same in Moz as it did in IE

y'know... if you post this in our old forum....
someone will probably just do it for you in like 10 minutes 
(remember... they have a dedicated CSS section over there)


----------



## lora_3677 (Aug 4, 2003)

yeah, but they are mean... 

Hang on.. I'll upload the new pages and tell me what happens... hopefully they don't crash...

All I have here is FrontPage and IE.... I have DreamWeaver at home and I have NN to test with too.... 

I can't download NN or anything here because of the stupid security crap they have in place.... GEESH!!


----------



## khaki (Jul 26, 2003)

> _Originally posted by lora_3677:_
> *yeah, but they are mean... *


 tell me something that I don't know !!!!!!!!!! 

LOL

actually... I just took a look over there... 
and they actually have a "*where's khaki*" and a "*where are you?*" thread.
Apparently my extended absense has produced panic 

LOL (too funny)

(and apparently Dave Clark has disappeared from there too. _That_ is pretty wild)


----------



## lora_3677 (Aug 4, 2003)

well... when you continually act like you are a god and put people down for not knowing everything under the sun... people tend to leave...


----------



## khaki (Jul 26, 2003)

hey.... that's no way to talk about me !!!! 


oh 
you meant Dave Clark !!!!

oh... that's different


----------



## khaki (Jul 26, 2003)

oh... 
actually you just meant the people on that forum in general 
(yeesh... I am easily confused today  )


----------



## lora_3677 (Aug 4, 2003)

LOL!!!! i wasn't really saying THAT about either of you... just in general.


----------



## khaki (Jul 26, 2003)

where is your freak'n link


----------



## lora_3677 (Aug 4, 2003)

LOL!!!

http://www.preciousgemscattery.netfirms.com/kittens3.html

i uploaded the final draft. lol.


----------



## khaki (Jul 26, 2003)

and seriously.... you should just post it over there
(what have you got to lose?)

(you can always run away and come back here if they treat you rudely)


----------



## lora_3677 (Aug 4, 2003)

*******AAAAAAAAAAAAARRRRRRRRRR _ _ _ _ _ _ _ __ _ 

Me running away and screaming.. LOL!!!


----------



## lora_3677 (Aug 4, 2003)

I'm going to buy a book that is coing out next month. second edition of a bok that is now out of print and impossible to find.
CSS:seperating presentation from content


----------



## khaki (Jul 26, 2003)

okay LO....

Moz doesn't like this page :

(this is 2 screenshots stitched together.... just so you know)


----------



## lora_3677 (Aug 4, 2003)

odd.... it's putting my footer inside my content and it's changing the size of the left column.. eventhough it is set to a size and so is the graphic... AND it's not picking up the right colors..... the text is supposed to be WHITE 
links blue.. but text WHITE

well... crap!


----------



## lora_3677 (Aug 4, 2003)

i'll test it tonight in NN and see what it does...


----------



## khaki (Jul 26, 2003)

it'll probably look EXACTLY like that screenshot (Moz and NN interpret things almost identically... although I think that Moz may be smarter than NN)


----------



## lora_3677 (Aug 4, 2003)

Yeah.. i found one prob.. obviously IE is VERY forgiving... I had the column width at 135 and graphic at 200... OOPS!!

so that is fixed... so i just need to to fix that on all pages and then tackle the footer deal....

i'll probably get that done this weekend.

i was able to download mozilla here just to test stuff on .. but it won't connect to the www... but it's good for testing my files before uploading.

THANK YOU!!!! You are awesome!


----------



## Gibble (Oct 10, 2001)

...hmm...I should check these development topics more...I didn't even realize you were still having problems 

Sorry.


----------



## lora_3677 (Aug 4, 2003)

LOL!! that's ok, Gibs. No big deal. Not really problems... just cross browser crap that is frustrating.

I have the site done now. K, I really can not figure out why mozilla is closing my content box before putting in the columns... the blue bar that you see across the top is actually the top and bottom borders of the content box. The only page that displays correctly is when I have a graphic that goes across the content box... so i guess if there is nothing in it, it just closes it... and the weird thing is... NN shows it correctly.. it's only a mozilla thing and since it doesn't really mess up the page that bad, i'm leaving it. so now i have IE, NN and Moz downloaded at home.... guess i might as well find opera, too. LOL!!

www.preciousgemscattery.netfirms.com is FINISHED!! for now.. gotta add new pics of the babies thursday.


----------

