CSS Floats problem

HTML, CSS and anything else that deals with client side capabilities.

Moderator: General Moderators

Post Reply
Luigicamp
Forum Newbie
Posts: 3
Joined: Sat Jan 31, 2009 2:29 pm

CSS Floats problem

Post 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
Last edited by Benjamin on Sun May 10, 2009 3:18 pm, edited 1 time in total.
Reason: Changed code type to css.
wispa
Forum Newbie
Posts: 5
Joined: Sun May 10, 2009 7:41 am

Re: CSS Floats problem

Post 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
Luigicamp
Forum Newbie
Posts: 3
Joined: Sat Jan 31, 2009 2:29 pm

Re: CSS Floats problem

Post 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.
User avatar
Christopher
Site Administrator
Posts: 13596
Joined: Wed Aug 25, 2004 7:54 pm
Location: New York, NY, US

Re: CSS Floats problem

Post 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.
(#10850)
Post Reply