left alignment

[chechu]

Hey all,

I have an alignment issue, and feel rather stupid with it.

Please have a look at the left bar at http://www.casalplanet.com.
I would like to place the same bar under the left bar, as a new menu item. But when I just copy the same div of the left bar, it looks like this: http://www.casalplanet.com/testDD.php

This is the css for that div:

.column1{
background-image:url(images/bg1.gif);
background-position:top left;
background-repeat:repeat-y;
width:247px;
float:left;
position:relative;
margin:0 8px 0 10px;
display:inline;
}
.item{
width:200px;
padding:14px 0 2px 25px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color:#5F5F5F;
float:left;
}
.item img{
float:left;
border:1px solid #E2E2EA;
margin:0 0 6px 0
}
.item p{
float:left;
width:86px;
margin:0 13px 0 0;
display:inline;
text-align:center
}
.item a{
color:#D8420D;
text-decoration:none;
display:block;
margin:0 auto;
}
.item a:visited{text-decoration:none;}
.item a:hover{text-decoration:none;}
.items{
float:left;
padding:20px 0 0 0
}
.slice1{
position:absolute;
top:32px;
left:-22px;

Can anyone let me know what to change to have the two divs under eachother, and not next to eachother, please ? I tried by removing the float and position, but doesn't work.

Thanks !!

[bluewalrus]

Here is my guess I think your using a float and didn't clear it on the second one. I can't open firebug the easy way though cause you blocked right clicking which is annoying so that's why it's a guess.

[chechu]

You can see the css above: what should be changed for the second div then ?

[bluewalrus]

css doesnt show rendering or the html

[chechu]

I enabled the right click. Can that help to find the solution ?

[simcomedia]

It appears you're trying to put the copied <div> next to the current left column (column1) <div> which is causing a space issue and pushing the column2 <div>'s down. Not sure why you want to add another column when you could just keep adding items to the current column1 and it will expand downward, but, hey...not my site :)

Basically you X amount of space and the two column divs can't be together like this:

<div id="column1">Content</div>
<div id="column1">Content</div>
<div id="column2">Content</div>

It would need to be like this:

<div id="column1">Content</div>
<div id="column2">Content</div> // assuming this is the last column2
<div id="column1">Content</div>

Then create this:

#clear {
clear: both;
}

And add it like this:

<div id="column1">Content</div>
<div id="column2">Content</div>
<div id="clear"></div>
<div id="column1">Content</div>

That acts like a breaker and clears the float: left; declarations above it so you can have your new column1 aligned to the left.

I didn't look through all your code but this is a start.

[chechu]

It appears you're trying to put the copied <div> next to the current left column (column1) <div>
No, I wish to have div1 under div1, so that the appartment section is twice below eachother. So compared to the index, the change would be that there is a div added below the appartments. So your solution doesn't work.

[chechu]

In tables it should be like this:


<table><tr><td>
<div for rent>
<br>
<div for rent>
</td><td>
<div safars>
<br><div golf>
<br>
<div tours>
...
</td><td>
banners, links, testimonials, contact
</td></tr></table>

Wit the current css, I cannot get the two <div for rent> under eachother.

[simcomedia]

I told you how to do it. With <div>'s it's different than tables. I'll illustrate best I can.

<---- width of area you can use includes left column1 and the column2 divs--->

Your current setup has just 1 column1 div which stretches vertically and several column2's that spread horizontally and 'stack' one on top of the other vertically. If you put the new column1 div next to the current column1 div there's no room. Result is:

<----column1 ---><---column1--->
<---column2--------->

Is your result. Right? Therefore, you have to put the NEW column1 AFTER the final column2 in the stack. But before you do that you have to 'clear' the column1 and column2 'floats' so that the NEW column1 doesn't try to stack itself to the right of column2.

If you put 3 float: left; elements together in one wrapper div then they will try to align left to right unless there's no room. If you use clear: left; or clear: both; then that empties the 'floats' and allows the next div (your new column1) to exist in the next available free space.

If you do it my way it should come out like so:

<----column1----><---------column2's--------->
<----column1----><--------empty space------->

[bluewalrus]

<div class="column1">
</div>
<div class="column1" style="clear: both;">

[chechu]

Thanks ! Thanks ! I just added the style="clear: both"; as "bluewalrus" suggested, and it works perfectly !

"Simcomedia": no offence, but I tried the easiest solution, which doesn't mean yours doesn't work. But I think it works now because at the bottom both div1 and div2 have the same lenght. But if I wish to extend div2, then there would be a gab between div1 and div1 below it. I hope that won't happen with the code of "bluewalrus".
But thanks a lot for your effort !

[chechu]

It seems like there is an issue with "clear:both".

On my computer, in IE7, I see it like his:

1 4
2 5
3 6

Where 2 and 3 have "clear:both"

On another computer, also in IE7, it looked like this:

1
2
3 4
--5
--6

How come ? It seems it is a difference between XP and Vista. How can that be resolved, please ?

[chechu]

Anyone please ?

[bluewalrus]

The test page says no input file. Is it on your live site now? Can you post a screenshot of both, I don't have IE.

[chechu]

I have indeed removed that page, as I believe I solved the problem by using a bypass solution.

This is how it looks like now:


<div class="leftinner">
<div class="column1"></div>
<div class="column1"></div>
<div class="column1"></div>
</div>
<div class="column2">...

where innerleft has the following styles:


.leftinner{
width:265px;
position:relative;
float:left;
}

Like this it seems to be okay in both XP and Vista, withouit using the "clear:both"