Printable View
I'm working on a page right now where i need two columns, one for a nav menu and one for content. I have everything lined up like i want with two divs and left floating them next to one another. My problem comes if i resize the screen, the content panel drops below the nav menu instead of being next to it.
Any way to make the divs stay put?
try using a wrapper div and check your padding and margins? You have both divs floating left? Try floating the content div to the right? lol. Wanna post your code? kinda hard to understand what your doing.
Hey, while you guys are at it; I need to learn CSS, what's the best way to do that? Sorry for the hijack....
http://glish.com/css/9.asp
found this for ya real quick, haven't used it but it looks simple enough.
http://www.htmldog.com/
http://www.alistapart.com/
These sites are great for your css journey. the html dog has some really great intro stuff. A list apart has great everything. cheers
Oh god, I came here to get away from geekdom. We've outed ouselves guy's. Ogre will be along soon.
sounds like this will fix the problem, but also adding the detail that you'll want to set a fixed width for the wrapper to ensure it don't get all liquiddy on ya.Quote:
Originally Posted by element1
yeah, this one may be a better example, using a fixed width wrapper and floated elements inside. Looks closer to what you may already have going.
http://glish.com/css/3.asp
I tried the wrapper and that didnt work.
I need both the 'float: left' commands to make the two columns float next to each other (rather than on top of each other) and be aligned off the left side of the page.
and RB,
Check out the web developer toolbar for firefox. it has some pretty useful features for dealing with css.
Otherwise the htmldog and alistapart are two of the best css sites. also check out w3schools which has a sandbox environment where you can test things out while you learn, good beginner site. and a really cool one for seeing what is possible with css design is the css zen garden, more of a designer site than a programmer site.
Try giving the div on the right a margin of the same width of the left's div
If your only dealing with 2 columns it might be easier to just use absolute positioning? Are you getting this in multiple browsers or just one?
I'll have to check out the sandbox, that sounds pretty cool.
RB et al, Here's a really cool diagram of the css box model...
http://www.hicksdesign.co.uk/journal/3d-css-box-model
and a little flash model someone adapted...
http://www.hicksdesign.co.uk/journal/3d-css-box-model
RB, I think these will really help you visualize what you are actually controlling with your css. cheers, once you get css you will be amazed you ever did it the old fashioned way.
Have you tried position:aboslute with top and left? If the nav. column is of constant width, this should work fine.Quote:
Originally Posted by fez
edg
I got it figured out. edg, thanks for the pointer, it put me on the right path.
i set up a div as a container, with a fixed top and left and a position:absolute
then i dropped my columns in with float:left and position:relative.