Help with div positioning/floating

[Darkmatter5]

Here's my CSS

.info_top-left {
    background: url(../images/top-left.png) no-repeat;
    border-style: hidden;
    width: 13px;
    height: 13px;
    float: left;
}
.info_top {
    background: url(../images/top.png) repeat-x;
    border-style: hidden;
    height: 13px;
    width: 299px;
    float: left;
}
.info_top-right {
    background: url(../images/top-right.png) no-repeat;
    border-style: hidden;
    width: 13px;
    height: 13px;
    float: left;
}
.info_left {
    background: url(../images/left.png) repeat-y;
    border-style: hidden;
    float: left;
}
.info_content {
    background-color: black;
    float: left;
}
.info_right {
    background: url(../images/right.png) repeat-y;
    border-style: hidden;
    float: left;
}
.info_bot-left {
    background: url(../images/bot-left.png) no-repeat;
    border-style: hidden;
    width: 13px;
    height: 13px;
    float: left;
}
.info_bot {
    background: url(../images/bot.png) repeat-x;
    border-style: hidden;
    height: 13px;
    float: left;
}
.info_bot-right {
    background: url(../images/bot-right.png) no-repeat;
    border-style: hidden;
    width: 13px;
    height: 13px;
    float: left;
}

 

Here's my PHP

echo "<div class='info_top-left'> </div><div class='info_top'> </div><div class='info_top-right'> </div>
      <div class='info_left'> </div><div class='info_content'>$row[name]</div><div class='info_right'> </div>
      <div class='info_bot-left'> </div><div class='info_bot'> </div><div class='info_bot-right'> </div>";

 

As you can see from the attached screenshot, the top row works.  The middle row is being put after the top row.  How can make the middle row go down a line just under the top row?  And the same for the bottom row?

 

[attachment deleted by admin]

[dropfaith]

add div class clear

 

css

 

.clear {clear:both;}

]

then where you want it to jump to the next line just do

 

<div class="clear"></div>

[Darkmatter5]

I got my code to work like this

.info_wrapper {
    width: 325px;
}
.info_top-left {
    background: url(../images/top-left.png) no-repeat;
    border-style: hidden;
    width: 13px;
    height: 13px;
    float: left;
}
.info_top {
    background: url(../images/top.png) repeat-x;
    border-style: hidden;
    height: 13px;
    width: 299px;
    float: left;
}
.info_top-right {
    background: url(../images/top-right.png) no-repeat;
    border-style: hidden;
    width: 13px;
    height: 13px;
    float: left;
}
.info_left {
    background: url(../images/left.png) repeat-y;
    border-style: hidden;
    width: 13px;
    height: 200px;
    float: left;
}
.info_content {
    background-color: black;
    width: 299px;
    height: 200px;
    float: left;
}
.info_right {
    background: url(../images/right.png) repeat-y;
    border-style: hidden;
    width: 13px;
    height: 200px;
    float: left;
}
.info_bot-left {
    background: url(../images/bot-left.png) no-repeat;
    border-style: hidden;
    width: 13px;
    height: 13px;
    float: left;
}
.info_bot {
    background: url(../images/bot.png) repeat-x;
    border-style: hidden;
    height: 13px;
    width: 299px;
    float: left;
}
.info_bot-right {
    background: url(../images/bot-right.png) no-repeat;
    border-style: hidden;
    width: 13px;
    height: 13px;
    float: left;
}

 

But my problem is all "info" boxes I create will have a fixed height of 200px.  How can I make it dynamic and have the left and right divs be the same height as the content div?  Do I have to make another wrapper div for the center row of divs and make it's height based off of the content of the contents div?  If so how do I go about doing that?

[Darkmatter5]

Okay here's a screenshot so you can see what's happening.

 

[attachment deleted by admin]

[lostprophetpunk]

May I just ask why you are doing the box in so many parts? Is the width of the box changing...if not then there is an easier way to do what you are trying to do.

[dbrimlow]

You just need to use a modified "sliding doors technique" effect doug bowman's sliding doors image effect.

 

This technique lets you use one graphic to accommodate an auto expanding box "width or height".

 

CSS is about making things easier and code leaner - not harder and more cluttered.

 

This is a mess known as "Divitus":

<div class='info_top-left'> </div><div class='info_top'> </div><div class='info_top-right'> </div>
      <div class='info_left'> </div><div class='info_content'>$row[name]</div><div class='info_right'> </div>
      <div class='info_bot-left'> </div><div class='info_bot'> </div><div class='info_bot-right'> </div>

 

One div can do the same thing with a sliding door.