In an effort to appease all the table naysayers here, I'm trying my darndest to make a layout with div soup. The current problem I'm on doesn't appear to be do-able without tables. I've searched far and wide through Google & haven't found anything that can satisfactorily do what I'm trying to do.
The dark(er) blue is a placeholder for the menu I've got - it's working fine & is just in the image to put the main problem in context. The light blue sections are field labels for form elements. The white sections are what hold the data.
As the image shows, sometimes the field label wraps onto multiple lines and sometimes the field data wraps.
The layout of the code is like so:
Code: Select all
<div class = "field"> <div class = "field-label"> This is the blue area. This is where "Field Label" would be placed </div> This is the white area. This is where "Field Data" would be placed.</div>The methods I've tried so far are:
Method 1
- Give the .field div a border the width & colour of what appears to be the .field-label field.
- Float the .field-label div left, give it a width the same size as the .field border, and a negative margin of that same size.
Code: Select all
.field{ position:relative; display:block; background:#fff; border-left:200px solid #4fb2fe; overflow:visible; color:#f00; margin-bottom:10px; padding:3px;}.field-label{ float:left; position:relative; margin-left:-195px; width:195px; display:inline;}Method 2
- Give the .field div a background image. The background image is placed & repeated in such a way as to mimic the background colour of the .field-label div.
- Float the .field-label div left, and give it the same width as the blue area of the .field div's background image.
Why it doesn't work: Since the .field-label div is floated, it's only as high as it's content. If the .field content wraps onto multiple lines, anything in the .field section on subsequent lines wraps around into the .field-label section.
I've been working & puzzling with this thing for at least a week now. Had I been using tables it would have been done in 20 minutes. I'm sending this out to the community here in one last attempt to get a div soup solution.
Best of luck