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!!!
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!!!
Which browsser are you using/intending to use ?
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.
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</di v>
<div id="SmallContainer">Text</ div>
</div>
</body>
</html>
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</di
<div id="SmallContainer">Text</
</div>
</body>
</html>
ASKER
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?
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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
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.
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.
ASKER
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.
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.
ASKER
Oops, i figured it out. I added Clear: Left, and it fixed it all for me
Thanks for the help!
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!
Is it that you want the touching sides to in the center of the page.
Please clarify
Easynow