...

View Full Version : CSS Question. Fluid Layout?



Syrehn
12-01-2009, 08:36 PM
I thought I posted this thread today but I guess I didn't submit it since I can't find it. Forgive me if this is a double thread.

I'm trying to create a fluid layout. I'm trying to have it go from 1260 to a min of 755. I believe I have the basics right for it. The only problem right now that I'm having is that the main content div is not lining up next to my sidenav div like I want it to. It's appearing underneath it.

Can someone take a look at my progress so far and let me know what I might do to correct this?

the link is:

http://www.designfoxmediaworks.com/clients/peaveymart/index.html

Excavator
12-01-2009, 08:55 PM
Hello Syrehn,
You float your #main_content but you don't give it a width and that is required.
A two column layout would typically have a left floated sidebar and the content margined over the width of the sidebar...
Like this
#container #left_nav {
width: 200px;
color: #00F;
margin-top: 10px;
margin-left: 5px;
border: 1px solid #063;
padding: 10px;
float: left;
}
#container #main_content {
border: 1px solid #C39;
margin: 10px 0 0 230px;
}


Like this example. (http://nopeople.com/CSS/equal_length_columns/index.html)


You could also put that #left_nav floated inside #main_content so the text of your content could wrap under the nav.

Syrehn
12-01-2009, 09:09 PM
I was hoping i wouldn't have to define the width as then it would take away the fluid layout would it not?

i dont' want my text to wrap under the sidenav.

Excavator
12-01-2009, 10:17 PM
I was hoping i wouldn't have to define the width as then it would take away the fluid layout would it not?

i dont' want my text to wrap under the sidenav.

The CSS I quoted in my first reply will meet both of the requirements you state here.
No width and no wrapping under sidenav.

Did you look at it?

Syrehn
12-01-2009, 10:48 PM
I tried this change and it is sending the text wrapping around the left nav, viewable on:

http://www.designfoxmediaworks.com/clients/peaveymart/index.html

ty for helping me! :)

Excavator
12-01-2009, 11:18 PM
margin-top: 10px 0 0 230px; is not the code I suggested! Look at my post again. Look at the example page I linked you to again.

Syrehn
12-02-2009, 02:52 PM
lol i'm sorry, i'm such a tard. it was a long day yesterday and i didn't copy the right code!

DOH!

i will try it again

Syrehn
12-02-2009, 03:44 PM
your sample worked btw. ty!

i'm curious to know, since i'm trying to achieve a fluid layout is it possibly to have a image in a div that will also fluidly resize?

Excavator
12-02-2009, 04:16 PM
Well, the short answer is no. An image has dimensions to it even if the container you put it in doesn't.
Of course you may be able to find a way to make it fluid, but most images will get skewed out of proportion depending on how the end user sizes his browser, so the end result is not so good.

have a look at this resizeable background demo. (http://nopeople.com/CSS/background_image_resize/index.html)

Syrehn
12-02-2009, 05:51 PM
i have another question while I'm here and I don't want to open another css thread when this one is open.

i'm working with site : http://www.designfoxmediaworks.com/clients/walkerindustries/services.html

as you can see the content background doesn't extend down to the footer, is there a way to do this without setting a static height? the reason i'm asking this is I do have content on other pages that is longer and causes it to extend.

Excavator
12-02-2009, 06:02 PM
Since it's just a color and not an image, one way is to make the color on the full height div appear to be the one that holds the text. That doesn't always work well with borders though.

The easiest solution is to photoshop an image that can repeat on the y axis and fill your columns no matter what the height. This is called the Faux Column approach. I have a demo here (http://nopeople.com/CSS/faux_columns/index.html)or you can google it for a bunch more.

Syrehn
12-02-2009, 10:09 PM
I managed to achieve a dynamically resizing image on the above link. But only because I knew the max width that the image needed to be to fill the div it was being contained in when the design was expanded to it's farthest point.

So I used the following to make it be able to contract:

img.widthmaximage {
max-width:100%;
min-width: 30%;
}

and it goes down to fit porportionally at the smallest window size that I have set my container div to.

Now if only I could do this with background images so that I could put links overtop! haha



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum