Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12
  1. #1
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question CSS Question. Fluid Layout?

    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/c...art/index.html

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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
    Code:
    #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.


    You could also put that #left_nav floated inside #main_content so the text of your content could wrap under the nav.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.
    Last edited by Syrehn; 12-01-2009 at 09:12 PM.

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by Syrehn View Post
    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?
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #5
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I tried this change and it is sending the text wrapping around the left nav, viewable on:

    http://www.designfoxmediaworks.com/c...art/index.html

    ty for helping me!

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #7
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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

  • #8
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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?

  • #9
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #10
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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/c.../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.

  • #11
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,675
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    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 or you can google it for a bunch more.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #12
    New Coder
    Join Date
    Sep 2009
    Posts
    75
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •