0

At the top of a page I've got two divs, one floated to the left and one to the right. I can place text with a border between them, however, I now need to stack two such areas of text between them.

Here's a Fiddle illustrating my problem: http://jsfiddle.net/TcRxp/

I need the orange box under the green box, with each center aligned with the other. The "legend" (floated to the right) used to be at the same level but is shifted down now.

I tried adding another table to the mix but that didn't help.

Excuse the markup - it's not real slick, I know. A few people have touched this over time and none of us are gurus at this.

And yes, I have lobbied for a designer to be added to the team but it hasn't happened yet.

Thanks,

Paul

Paul
  • 19,704
  • 14
  • 78
  • 96

5 Answers5

1

UPDATE: Incorporating @Jeremy B's suggestion

Does it have to be via CSS changes? When dealing with scenarios like this, you need to be careful of the order in which the HTML elements are defined.

Look at the modification here: http://jsfiddle.net/TcRxp/8/

I was able to acheive what you needed by changing the order of the three DIVs and using the CSS suggesion from @Jeremy B

Essentially, the logic for the layout is

  1. Draw the float-right content
  2. Draw the float-left content
  3. Draw the content in the middle (as it will now render to the right of the float-left content.
Babak Naffas
  • 12,395
  • 3
  • 34
  • 49
1

First make your top span a block element to stack them:

<span class="color status active bold" style="display:block">Status:</span>

then float the middle div left as well:

add float:left to #headmiddle in your css

DShultz
  • 4,381
  • 3
  • 30
  • 46
  • I have to tinker with it some more but this is very close. As long as I keep the margins in the middle set (and don't remove them or change to auto) it works pretty well. I removed the fixed table width as well. http://jsfiddle.net/snyAY/ – Paul Jun 09 '11 at 14:34
1

It's always going to be difficult to get the desired results when you're combining CSS and tables-for-layout.

I would suggest simplifying your HTML:

<div id="headleft">a little search form here</div>
<div id="headmiddle">
    <div class="active"><strong>Status:</strong> Active</div>
    <div class="search">Search results displayed</div>
</div>
<div id="headright">
    <dl>
        <dt>Legend:</dt>
        <dd>Status numero uno</dd>
        <dd>Status two</dd>
    </dl>
</div>

and your CSS:

div { padding: 2px; }
strong { font-weight: bold; }
#headleft { float: left; font-size: 0.8em; }
#headmiddle { float: left; font-size: 0.8em; }
#headmiddle div { border: 1px solid #000; margin-bottom: 3px; }
.search { background: orange; }
.active { background: #8ed200; }
#headright { float: right; font-size: 0.8em; }
dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }

The result is semantically correct HTML, easier to read and therefore easier to modify in the future. Supporting fiddle.

Kalessin
  • 2,282
  • 2
  • 22
  • 24
  • Thanks, this is so close! I'd like the middle part to be centered though. It seems to be simple to do...if I didn't have two stacked boxes. I may have to abandon that idea because it's proving to be such a pain. I tried to adapt this example to your code but it worked horribly :) http://jsfiddle.net/m4pZz/ – Paul Jun 09 '11 at 14:26
  • 1
    Yeah, it's tricky. I've updated the solution at http://jsfiddle.net/TcRxp/25/ but you should be aware that it doesn't work in IE7 and older. – Kalessin Jun 09 '11 at 16:59
0

If you need to do it with CSS, see my changes: Fiddle

I added the following:

#headmiddle span.status { display: block }

This will cause your spans to "stack".

Jeremy B.
  • 9,168
  • 3
  • 45
  • 57
0

I got it by putting together many different sources. Alex Coles' solution was closest right off the bat but the middle wasn't centered. It was much cleaner than my mess too. I started with the code from this post:

<style type="text/css">
.leftit {
    float: left;
}
.rightit {
    float: right;
}
.centerit {
    width: 30%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.centerpage {
    width: 80%;
    margin-right: auto;
    margin-left: auto;
}
</style>
</head>
<body>
<div class="centerpage">
<div class="leftit">Hello Left</div>
<div class="rightit">Hello Right</div>
<div class="centerit">Hello Middle</div>
</div>

(fiddle for above)

I took the elements Alex cleaned up which got me even closer to my goal, but the center color blocks were way too wide. From this question I learned about "max-width", which ended up being the final piece I needed...or so I thought.

Edit: max-width doesn't work in IE7 quirks mode (which I have to support) so from this page I learned how to tweak my css to work in IE7 quirks mode, IE8, and FF.

The final code (fiddle):

.leftit {
    float: left;
    font-size: 0.8em;
}
.rightit {
    float: right;
    font-size: 0.8em;
}
.centerit {
    width:220px;
    margin-right: auto;
    margin-left: auto;
    font-size: 0.8em;
}
#headmiddle div {
    border: 1px solid #000; 
    margin-bottom: 3px;
}
.centerpage {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

strong { font-weight: bold; }

.search { background: orange; }
.active { background: #8ed200; }

dt { float: left; font-weight: bold; }
dd { margin-left: 4.5em; }

<div class="centerpage">
    <div class="leftit">a little search form here</div>
    <div class="rightit">
        <dl>
            <dt>Legend:</dt>
            <dd>Status numero uno</dd>
            <dd>Status two</dd>
        </dl>
    </div>
    <div class="centerit" id="headmiddle">
        <div class="active"><strong>Status:</strong>
            Active</div>
        <div class="search">Search results displayed</div>
    </div>
</div>

Thanks to all the great answers - I learned a lot from this question.

Paul

Community
  • 1
  • 1
Paul
  • 19,704
  • 14
  • 78
  • 96