/    Sign up×
Community /Pin to ProfileBookmark

2 column fluid layout

Copy linkTweet thisAlerts:
May 29.2006

I am trying to make a site with a header, footer (both 100% width) with a two-column site in-between. The left column is fixed-width, and the right column contains the content, and should be fluid.

[url]http://www.dentone.net/orly/index.php[/url]
[url]http://www.dentone.net/orly/common/css/default.css[/url]

The columns would be ok, if they were side-by-side, but I can’t seem to figure it out.

Any thoughts? Any help would be greatly appreciated!

Thanks!

to post a comment
CSS

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@nataliemacMay 29.2006 — Quick and dirty check shows this is okay in IE and FF:

[CODE]#col-left {
position: absolute;
top: 140px;
left: 20px;
text-align: center;
width: 300px;
padding: 0em;
margin: 0em;
clear: none;
}

#col-right {
margin: 20px 20px 10px 350px;
padding: 0em 1em 1em 1em;
clear: none;
}[/CODE]
Copy linkTweet thisAlerts:
@WebJoelMay 29.2006 — #col-left {

/*

position: absolute;

top: 140px;

left: 20px;

*/

float: left;

text-align: center;

width: 300px;

padding: 0em;

margin: 0em;

[B]clear: left;[/B]

}

Try this. Problem solved. ?
Copy linkTweet thisAlerts:
@adentoneauthorMay 30.2006 — #col-left {

/*

position: absolute;

top: 140px;

left: 20px;

*/

float: left;

text-align: center;

width: 300px;

padding: 0em;

margin: 0em;

[B]clear: left;[/B]

}

Try this. Problem solved. ?[/QUOTE]

Ok, the [B]clear: left;[/B] worked, and I edited to include some additional padding:
[CODE]
#col-left {
/*
position: absolute;
top: 140px;
left: 20px;
*/
float: left;
text-align: center;
width: 300px;
padding: 2em 0em 0em 0em;
margin: 0em;
clear: left;
}

#col-right {
float: right;
margin: 20px 20px 10px 350px;
padding: 0em 1em 1em 1em;
clear: none;
}
[/CODE]

This seems to work very well in IE 6, but FF is still not lookin' good.

Any other thoughts? (I'll even submit to doing a hack...if I must).

THANKS WebJoel!! You ROCK!
Copy linkTweet thisAlerts:
@adentoneauthorMay 30.2006 — Quick and dirty check shows this is okay in IE and FF:

[CODE]#col-left {
position: absolute;
top: 140px;
left: 20px;
text-align: center;
width: 300px;
padding: 0em;
margin: 0em;
clear: none;
}

#col-right {
margin: 20px 20px 10px 350px;
padding: 0em 1em 1em 1em;
clear: none;
}[/CODE][/QUOTE]

nataliemac, Yes, it does seem to work, but the footer creeps up (especially noticed on the newer "widescreens", and on the index page I needed to add some extra line breaks to get the footer down (I hate doing that).

I know that the [B]position: absolute;, etc[/B] works, but I am trying not to use absolute positioning, I'd really like them to float nicely together.

thanks for taking the time, though!
Copy linkTweet thisAlerts:
@adentoneauthorMay 30.2006 — SO, just so everyone is clear, the site looks ok now in IE 6 and not ok in FF 1.5. I have not tested on other browsers.

http://www.dentone.net/orly/index.php

http://www.dentone.net/orly/common/css/default.css

Any help would be appreciated!
Copy linkTweet thisAlerts:
@CrustyMcMuffinMay 31.2006 — I think your problem lies in this bit of code

[CODE]
#col-right {
float: right;
margin: 20px 20px 10px 350px;
padding: 0em 1em 1em 1em;
clear: none;
}
[/CODE]

Having the left margin set at 350px isn't needed, change it to 20px and also define a width for this element and I think you'll be ok. I tried it out with width: 400px; but you'll need to play around with the width value to get it looking right.
Copy linkTweet thisAlerts:
@adentoneauthorMay 31.2006 — bingo - this did it:

[CODE]
#col-left {
float: left;
text-align: center;
width: 300px;
padding: 2em 0em 1em 0em;
margin: 0em;
clear: left;
}

#col-right {
float: right;
width: 60%;
margin: 20px 20px 0em 0em;
padding: 0em 1em 1em 1em;
clear: none;
}
[/CODE]

Thanks for the help!
Copy linkTweet thisAlerts:
@WebJoelMay 31.2006 — I think your problem lies in this bit of code

[CODE]
#col-right {
float: right;
margin: 20px 20px 10px 350px;
padding: 0em 1em 1em 1em;
clear: none;
}
[/CODE]

Having the left margin set at 350px isn't needed, change it to 20px and also define a width for this element and I think you'll be ok. I tried it out with width: 400px; but you'll need to play around with the width value to get it looking right.[/QUOTE]

Very good. I did nearly the same thing 'offline' this afternoon and it seemed to work for me in IE [I]and[/I] Fx (although without the absolute-path to the URL, cannot be sure as the *SWF is merely a 'blank area' in Firefox).

I sent my revision to the postee earlier and hope that it's right (or closer!). Still waiting to hear either way, but glad that another has come to a similar conclusion... ?

(edit: ) I see that the postee has just resolved the problem! Yay!!
Copy linkTweet thisAlerts:
@adentoneauthorMay 31.2006 — I am glad as well, as will my client be.

Thanks for your help!

I look forward to helping out more on this forum, as everyone has been so helpful to me!

Thanks again!
×

Success!

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

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...