Link to home
Start Free TrialLog in
Avatar of BeamerCola
BeamerCola

asked on

Centered side by side boxes.

I ran into a horrible roadblock today.  Heres my problem:

I need 2 different sized boxes side by side with specified widths.  I found out that you cant apply widths to inline elements.

Here was my code:

Style
----------
Body {
      margin-left: auto;
      margin-right: auto;
      text-align: center;
}

#BigContainer {
      width: 380px;
      border: solid #E0E0E0 2px;
      background-color: #E9E9E9;
      padding: 4px;
      margin-right: 6px;
}

#SmallContainer {
      border: solid #E0E0E0 2px;
      background-color: #E9E9E9;
      width: 220px;
      padding: 4px;
}

----------
Code
----------
<span id="BigContainer">
Text
</span>
<span id="SmallContainer">
Text
</span>

That put it just like i wanted it, except the boxes were the size of the text.  Thats no good!

I tried playing with positioning, but it threw off the centered-ness.

Please help!!!
Avatar of Dean OBrien
Dean OBrien
Flag of United Kingdom of Great Britain and Northern Ireland image

Not entirely sure what the problem is!  When i use the code above i get two box's side by side. one with width 380px and the other with width 220px.  No matter what text i insert they remain the same size(width) but grow in height.

Is it that you want the touching sides to in the center of the page.

Please clarify

Easynow
Which browsser are you using/intending to use ?
Avatar of BeamerCola
BeamerCola

ASKER

yeah, it works in some browsers, it needs to be 100% browser compliant, and the width property isnt.

I currently am using Safari 1.0 for mac.
Sorry - crazy day.

Do you mind using a container div for this:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--
body {
     text-align: center;
     }

div#main {
     width:630px; margin-left:auto; margin-right:auto;
     }

div#BigContainer {
     width: 380px;
     border: solid #E0E0E0 2px;
     background-color: #E9E9E9;
     padding: 4px;
     margin-right: 6px;
     display:block;
     float:left;

     }

div#SmallContainer {
     border: solid #E0E0E0 2px;
     background-color: #E9E9E9;
     width: 220px;
     padding: 4px;
     display:block;
     float:left;

     }
//-->
</style>
</head>
<body>
<div id="main">
  <div id="BigContainer">Text</div>
  <div id="SmallContainer">Text</div>
</div>
</body>
</html>
The problem with that, is that one is all the way to the left, and the other is all the way to the right.  I need a 6 px gap between them (the margin-right on the Big Container).  I thought your code would work .. makes sense.

It doesnt work in either mac browsers, which adhere to the standards... IE Windows is screwy.

Any other ideas?
Well, it works here in Mozilla, Opera, Netscape 6 + 7, and of course, IE. Assuming you're not using IE5.2 for the Mac, I don't kow wht it's not working - except for the fact that CSS is one messed up set of standards.
ASKER CERTIFIED SOLUTION
Avatar of seanpowell
seanpowell
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
There we go! i think that worked.  Let me test it on some more browsers and I'll come back and give you the points.

Thanks again.
Use HTML tables, and then add a bit of CSS to make them look pretty(borders, colours etc). Relying on CSS for essential formatting is a bit silly; as you've seen it's not very predictable.
One last question, i've got everything layed out, but i have a footer, and since the BigContainer goes further than the SmallContainer, the footer is pushed to the right of BigContainer, since BigContainer is Float:Left.

I tried Display:Block for the footer (which is div#foot) and it didnt help it.

Any ideas?


Phil -
I already have html with css for looks, it's not what i need, too cluttered, and ridiculous amounts of html to do small things that CSS could do in about 4 words.
Oops, i figured it out.  I added Clear: Left, and it fixed it all for me

Thanks for the help!
Do you have clear:both specified for the footer?
Woops - sorry- missed your last post. (clear:both is just to be safe - in case you ever add anything at the right of the page...
Thanks again - always happy to help out. And good luck with the project!