Sun, 2006-12-24 13:48
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.
Sun, 2006-12-24 13:55
#1
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?
Sun, 2006-12-24 14:13
#2
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
Sun, 2006-12-24 19:03
#3
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.
Sun, 2006-12-24 19:04
#4
Sorry Hugo, i dont
Sorry Hugo, i dont understand what you mean?
Sun, 2006-12-24 19:11
#5
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);
}
Sun, 2006-12-24 19:23
#6
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.
Sun, 2006-12-24 19:57
#7
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 
Sun, 2006-12-24 20:07
#8
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);
}
Sun, 2006-12-24 21:31
#9
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.
Thu, 2006-12-28 20:36
#10
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.