/    Sign up×
Community /Pin to ProfileBookmark

2 Column Fluid Layout Problem..need help!

Copy linkTweet thisAlerts:
Jun 20.2006

Hey all,

First, I must say that I feel comfortable calling myself a self-taught CSS Intermediate. With that being said, I always have problems with a multi-column layout. So far I have coded everything by hand in notepad, I’ve heard nasty stuff about the WYSIWYG editors. I’m trying to get a working template for use as a rubber stamp on other pages throught my entire website. I plan on having it as a personal ‘about me’/blog website, nothing professional. But what I’m really doing is using this experience as an excuse to learn more about web design and coding etc…

Here’s a link to what I’ve gotten so far: [URL]http://home.earthlink.net/~frijolie/template.html[/URL]

Now that you’ve had a chance to view what I’ve done so far, a few facts on the page you’ve just hopefully viewed. I will have all the CSS stuff in an external stylesheet once completed. I just left it in there for ease of use until I get the template working properly. I also pay close attention to make sure that all my code validates XHTML 1.0 Strict (as you’ll see in my Doctype) and CSS 1.0. I also regularly check to make sure that it looks the same in the only two browsers that I have installed FF & IE. The border on the right column is intended for a visual aid and it will be removed once I get the problem fixed.

Now on to the main event, if you clicked on the above link, I’ll bet you can see my problem right away. For some reason I can’t get the right column to be properly positioned. I’ve tried a float, an absolute position, and a relative position. I can’t seem to get any of them to look the way that I want them.

What can I do to fix this problem? I know that there are sites-o-plenty on the net that will create a columnar layout for you but, I want to learn this on my own. Please Help!! Thanks in advance for your time and efforts! Any constructive criticisms on the over all design/layout are also greatly appreciated!!

to post a comment
CSS

5 Comments(s) ↴

Copy linkTweet thisAlerts:
@ChiefNXJun 20.2006 — Put this:

[CODE]#right {
margin-left: 600px;
width: 196px;
background-color: white;
border: 1px dashed red;
position: absolute;
left: 106px;
top: 108px;
}[/CODE]

And then this

[CODE]<div id="right">
Lorem ipsum dolor sit amet
</div>[/CODE]

Immediately after the wrapper.

----------[B]Secondy[/B]----------

So far I have coded everything by hand in notepad, I've heard nasty stuff about the WYSIWYG editors. [/QUOTE]

Try a code editor like JEdit. Notepad is infuriatingly basic.


I also regularly check to make sure that it looks the same in the only two browsers that I have installed FF & IE. [/QUOTE]

Your site looks completely different in IE (to be fair, I do have IE 6, but so will many of your visitors).
Copy linkTweet thisAlerts:
@frijolieauthorJun 20.2006 — Does screen resolution matter? Because the measurements you gave me didn't work right on my computer. My monitor's resolution is 1280 x 800 (I'm on a widescreen laptop). If screen resolution matters is there some standard which you go by?
Copy linkTweet thisAlerts:
@frijolieauthorJun 20.2006 — I got it fixed so far in FF however, the differences between browsers is way different! I have no idea how to fix it so they look the same! Where do I begin, is it that stupid box model hack that I have to apply to fix parts of the IE inconsistencies?

Here's the link again (with the new updates):

[URL]http://home.earthlink.net/~frijolie/template.html[/URL]

Thanks again for your help
Copy linkTweet thisAlerts:
@ChiefNXJun 21.2006 — I'm fixing it.

I'll PM you with it when I'm done.

EDIT: Here try this. [Attached]

[upl-file uuid=7e09f04e-0420-4912-b3a6-964dd5eb2bac size=3kB]fluid 2-col thingy.zip[/upl-file]
Copy linkTweet thisAlerts:
@frijolieauthorJun 21.2006 — at my resolution (1280 x 800) the right column is way off target. Is there a particular resolution that should be your target audience? I changed my resolution down to 1024 x 768 and it was perfectly aligned. Why doesn't a float: right work? That way the right column would be forced to stay with in the wrapper div! If you absolutely position an element, it will only work within that particular resolution of your screen, correct?
×

Success!

Help @frijolie 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 5.8,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...