Hello,

I am coding a page and I can't seem to align the DIVs correctly.

I am explaining the problem below, but please check attachment image for details!

The problem:
I am trying to create the fields where I will add content to my site. And then some edges to it (which are thin DIVs on both sides).

I managed to create 4 DIVs, but I cannot align them one near another.
They also appear distorted, mixed up (as seen on the attachment).

Cannot put them one near another, I got mixed up in WRAPping and FLOATing them. Now I am all confused, please help.

The DIV CSS codes:

#wrap2 {
width: 975px;
overflow: hidden; /* Slight fix for holding floating elements */
margin: auto; /* This centers the div */

} #content-left-edge {
width: 5px;
float: left;
background-image: url('content-left-edge.jpg');
text-indent: 0px;
font-size: 11px;
margin-bottom: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;

} #content-field {
width: 620px;
float: left;
background-color: #7CC5E5;
font-family: arial;
text-indent: 0px;
font-size: 12px;
margin-bottom: 0px;
margin-top: 0px;
margin-left: 5px;
margin-right: 5px;

} #right-vertical-field {
width: 345px;
float: left;
background-color: #FFD101;
font-family: arial;
text-indent: 0px;
font-size: 12px;
margin-bottom: 0px;
margin-top: 0px;

} #content-right-edge {
width: 5px;
background-image: url('content-right-edge.jpg');
float: left;
text-indent: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
}

The HTML page code:

<div id='wrap2'>

<div id="content-left-edge">
<p><p>
</div>

<div id="content-field">
<p>This is the main content area</p>
</div>

<div id="right-vertical-field">
<p>This is the right vertical field</p>
</div>

<div id="content-right-edge">
<p><p>
</div>

</div>



Thank you in advance!

change to this

#wrap2 {
width: 975px;
overflow: hidden; /* Slight fix for holding floating elements */
margin: auto; /* This centers the div */

} #content-left-edge {
width: 5px;
float: left;
background-image: url('content-left-edge.jpg');
text-indent: 0px;
font-size: 11px;

} #content-field {
width: 620px;
float: left;
background-color: #7CC5E5;
font-family: arial;
text-indent: 0px;
font-size: 12px;

} #right-vertical-field {
width: 345px;
float: left;
background-color: #FFD101;
font-family: arial;
text-indent: 0px;
font-size: 12px;


} #content-right-edge {
width: 5px;
background-image: url('content-right-edge.jpg');
float: left;
text-indent: 0px;

}

Thank you. But now I have another problem.

The left and right fields are both for content and those narrow vertical divs should be holding the background image for the edges...

whenever I write content into the left and right fields (left for main content and right for banners, ads...etc), the two side DIVs disappear...

No idea where? Normally this whole thing, all 4 DIVs should "go down", continue extending towards the bottom of the page together with the content that I create. I write content, place line breaks, they should follow down, repeat themselves. That doesn't happen, the edges disappear!

Now I see that as I type a single "&nbsp;" into the side DIVs (the thin ones for the edges/frames), then they do follow the content downwards with a single line. they appear.

But: my problem now is that these DIVs don't automatically follow the main content fields downwards, but remain stuck (lag behind).

The content grows way down on the page and the edges remain stuck far higher...

I could put spaces and line breaks into the side DIVs in order to stretch them down...

Any solution for making them automatically follow the main (large) content DIVs?

I do not know what you mean, I just tested writing in the left(blue bg) and right(yellow bg) and it looks fine.
You are not trying to write into the divs that are 5px are you?

those narrow vertical divs should be holding the background image for the edges...

Why even bother to lay it out that way in the first place? Create a horizontal 'slice' of your full background, including the shadows, and then set it as a background to your primary container div and set it to repeat vertically.

Making 2 long narrow divs just for shadows is just complicating things

I solved the problem with a trick :P


margin-bottom: -1000px;
padding-bottom: 1000px;

Originally Posted by davelevin

I solved the problem with a trick :P
margin-bottom: -1000px;
padding-bottom: 1000px;

I doubt if this is a good choice of the solution. A must check on cross-browser as well.

I solved the problem with a trick :P

That "trick" is going to backfire on you eventually, it's not a good solution.

Please tell me how, what the disadvantages could be.
I need to know.

If you know a better solution...

I told you how to solve the shadowed background issue already and that method will eliminate 2 divs from the mix.

Given that 'solution' you used, I'd say you're not clearing your floats properly. If you clear them properly, you don't need that 'fix' at all. Read our stickies for how to clear floats.