Page 1 of 1

CSS Floats problem

Posted: Sun May 10, 2009 7:14 am
by Luigicamp
Hi every one,
I have a "floating" issue with CSS.
Before asking the question, here is the code below.

Left Box - The main Menus

Code: Select all

 
#leftNav {
    position:relative;
    left:150px;
    top:-327px;
    width:147px;
    height:279px;
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 14px;
    text-align: right;
    clear: left;
}
 
Center Box. Which is a vertical line separating the #leftNav to the Left from the #illustrations to the Right.

Code: Select all

 
#line {
    position:relative;
    left:310px;
    top: 35px;
    width:1px;
    height:350px;
    background-color: #666;
    clear: left;
}
 
The right Box - The content

Code: Select all

 
#illustrations {
    position:relative;
    left:325px;
    top:-610px;
    width:450px;
    height:392px;
    background-repeat: no-repeat;
    margin: 0px;
    padding: 0px;
    clear: right;
}
 
And EVERYTHING is contained in a box called #container, like so:

Code: Select all

 
#container {
    position:relative;
    top:20px;
    width:800px;
    height:600px;
    background-repeat: no-repeat;
    margin-right: auto;
    margin-left: auto;
}
 
The problem I am having is that if I make the #line longer, e.g from height:350px; to height:500px;, automatically my entire #illustrations box moves down as well, and I don't want that to happen. I only want to change the length of the #line, leaving everything else in place.

Thanks in advance for your help.

Luigi

Re: CSS Floats problem

Posted: Sun May 10, 2009 2:20 pm
by wispa
Are you wanting to get a fluid column layout so that the line height matches the height of the container?

If this is the case I would suggest that you use a background image on the container to repeat on the y axis therefore having 100% height of the container.

If this isn't the case, could you not give either the left or right columns a 1px border and set their height?

Also, if the columns are just going to be seated next to each other, wouldn't it be better to float all of them to the left? And possibly getting rid of the left & top parameters?

Hope this helps

Re: CSS Floats problem

Posted: Mon May 11, 2009 1:06 am
by Luigicamp
wispa wrote:Are you wanting to get a fluid column layout so that the line height matches the height of the container?

If this is the case I would suggest that you use a background image on the container to repeat on the y axis therefore having 100% height of the container.

If this isn't the case, could you not give either the left or right columns a 1px border and set their height?

Also, if the columns are just going to be seated next to each other, wouldn't it be better to float all of them to the left? And possibly getting rid of the left & top parameters?

Hope this helps
Hi, and thank you for your reply.
I didn't want to advertise the website, but if it helps you to get an idea, here is the http://www.luigi-design.com/illustrations.html
As you can see, now that I am adding more and more thumbs, I would like the separation line to be longer, to match the base of my last thumbs at the bottom.

Re: CSS Floats problem

Posted: Mon May 11, 2009 1:12 am
by Christopher
Rather than having the line be a separate container, just make the line the left border of the Right Box that has the images in it.