10 replies [Last post]
sn328721
Offline
newbie
Last seen: 12 years 47 weeks ago
Joined: 2006-12-24
Posts: 6
Points: 0

Hi,

Newbie here and just having some trouble with the main content box. I want the main content to be auto fitting to the page, but leaving the left navigation and right navigation in the same place at all times!

I have seen that alot of people have done this and i have tried adapting the code but it really messes up my layout.

Can anyone shed some light plz?

html code>>>









CSS>>

#header {
border:1px solid #bbb;
height:80px;
padding:10px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom:10px;
}
#style-switcher {
height:20px;
margin-top:10px;
margin-bottom:10px;
border:1px solid #bbb;
text-align:right;
vertical-align:middle;
background-image:url(../images/NavHeader/headerbg.jpg);
}
#content-left {
padding:10px;
width:130px;
height:150px;
line-height: 20px;
border:1px solid #bbb;
margin-right:10px;
margin-right:10px;
float:left;
top:130px;
}
#content-main {
height:100px;
padding:10px;
border:1px solid #bbb;
float:left;
margin:auto;
}
#content-right {
width:150px;
height:150px;
border:1px solid #bbb;
float:right;
}
#footer {
margin-top:10px;
border:1px solid #bbb;
width:756px;
vertical-align:middle;
text-align: right;
padding:10px;
height:20px;
background-image:url(../images/NavHeader/headerbg2.jpg);
float:none;
}

Mod Edit/ code tags added, please read the posting guidelines and stickies re formatted code and code requirements. Hugo.

sn328721
Offline
newbie
Last seen: 12 years 47 weeks ago
Joined: 2006-12-24
Posts: 6
Points: 0

also i have not included the

also i have not included the footer here, but when i do and set no width it appears just under the left, content and right boxes!

How can i put the content box directly under all of the boxes?

sn328721
Offline
newbie
Last seen: 12 years 47 weeks ago
Joined: 2006-12-24
Posts: 6
Points: 0

Ok solved the footer

Ok solved the footer problem!

i placed in the css that it should "float:left; left:0;"

but still need the auto adjusting content-main

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Place the floats first and

Place the floats first and then the middle content column without float or width and with side margins => side columns.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sn328721
Offline
newbie
Last seen: 12 years 47 weeks ago
Joined: 2006-12-24
Posts: 6
Points: 0

Sorry Hugo, i dont

Sorry Hugo, i dont understand what you mean?

sn328721
Offline
newbie
Last seen: 12 years 47 weeks ago
Joined: 2006-12-24
Posts: 6
Points: 0

Sorry Hugo, i understand now

Sorry Hugo, i understand now and have ammended but the code is still not playing ball! the main column has auto adjusted to both sides of the screen instead of being just in the centre of the two columns!

my new code is as follows

a:link { text-decoration: none; color: #000000; } a:visited { text-decoration: none; color: #000000; } a:hover { text-decoration: none; color: #00CCFF; } a:active { text-decoration: none; color: #000000; } body { font-family:arial,helvetica,sans-serif; font-size:12px; } #header { border:1px solid #bbb; height:80px; padding:10px; font-family: Arial, Helvetica, sans-serif; margin-bottom:10px; min-width:500px; } #style-switcher { padding:5px; margin-top:10px; margin-bottom:10px; border:1px solid #bbb; text-align:right; background-image:url(../images/NavHeader/headerbg.jpg); } #content { float:left; width:100%; } #wrapper { float:left; left:0; width:100%; margin-top:10px; min-width:500px; } #content-left { float:left; padding:10px; width:200px; height:150px; line-height: 20px; border:1px solid #bbb; margin-right:10px; top:130px; } #content-main { height:100px; padding:10px; border:1px solid #bbb; margin-left:10px; margin-right:10px; } .content-image { width:125px; border:1px solid #bbb; } .content-main-header { width:290px; margin-left:5px; font-size:12px; } .content-main-content { width:290px; margin-top:10px; margin-left:5px; font-size:11px; } #content-right { float:right; width:150px; height:150px; border:1px solid #bbb; width:200px; margin-left:-200px; } .content-header { text-align:center; width:160px; font-size:12px; color:#000000; background-image:url(../images/NavHeader/contentheaderbg.jpg) } #content-search { width:161px; height:70px; margin-left:10px; border:1px solid #bbb; } #content-prospectus { width:141px; height:40px; margin-left:10px; margin-top:10px; border:1px solid #bbb; } #content-newsletter { width:141px; height:70px; margin-left:10px; border:1px solid #bbb; margin-top:10px; } #content-links { width:141px; height:70px; margin-left:10px; margin-top:10px; border:1px solid #bbb; } .content-info { text-align:left; width:160px; line-height:18px; font-size:11px; text-indent:2px; } .content-news2 { text-align:left; width:160px; font-size:9px; } .content-searchbox { text-align:center; width:160px; } .content-news3 { width:160px; text-align:center; margin-top:1px; margin-bottom:1px; } #footer { padding:5px; border:1px solid #bbb; text-align:right; background-image:url(../images/NavHeader/headerbg2.jpg); }

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

You need to show all the

You need to show all the code, both html and css.

If you just want a fluid central column then moving the markup for the two floated side columns before the markup for the centre and then just ensuring that the center has horizontal margins that are equal to the width of the side columns should give you a fluid widthe center .

You seem to have changed rather a lot in that second code view, a link to the site would be helpful if possible.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Was there a reason that you

Was there a reason that you felt you needed to post this question to sitepoint after you had started to receive some help from this forum?

It doesn't exactly come across as very polite Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

sn328721
Offline
newbie
Last seen: 12 years 47 weeks ago
Joined: 2006-12-24
Posts: 6
Points: 0

Thanks Hugo, the centre

Thanks Hugo,

the centre column is auto adjusting to the size of the page but the right column has now dropped below the first two columns!

HTML

Untitled Document

Accessibilty Style Switcher
Left Content
Main Content
Right Content

CSS

a:link {
text-decoration: none;
color: #000000;
}
a:visited {
text-decoration: none;
color: #000000;
}
a:hover {
text-decoration: none;
color: #00CCFF;
}
a:active {
text-decoration: none;
color: #000000;
}
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom:10px;
min-width:500px;
}
#style-switcher {
padding:5px;
margin-top:10px;
margin-bottom:10px;
border:1px solid #bbb;
text-align:right;
background-image:url(../images/NavHeader/headerbg.jpg);
}
#content {
float:left;
width:100%;
}
#wrapper {
float:left;
left:0;
width:100%;
min-width:500px;
margin-top:10px;
}

#content-left {
float:left;
padding:10px;
width:140px;
height:100px;
line-height: 20px;
border:1px solid #bbb;
margin-right:10px;
}
#content-right {
float:right;
width:140px;
height:150px;
border:1px solid #bbb;
}
#content-main {
height:100px;
padding:10px;
border:1px solid #bbb;
margin-left:175px;
margin-right:165px;
}
#footer {
padding:5px;
border:1px solid #bbb;
text-align:right;
background-image:url(../images/NavHeader/headerbg2.jpg);
}

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Try removing the padding on

Try removing the padding on the left sidebar and content-main. Try if possible to avoid padding main structural containers , instead pad the inner nested elements.

Edit/ Just noticed that you still have a float after the non-floated element; both floats must come before the content-main, (with unwidthed center, padding shouldn't be a problem but I would still avoid it.)

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 4 years 45 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Thread terminated as the

Thread terminated as the poster appears to have rudely desided to concentrate on this same thread on sitepoint. Sad thing is the bleating last post asking if anyone can help? sort of thought you were getting a fair amount of that *shrug*

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me