use style="float:left" on each DIV (either directly or via a stylesheet)
James Curran
2008-10-08 15:34:53
+3
A:
I assume I would have to make an additional div to contain the date and month then float that correct?
Anders
2008-10-08 15:36:22
won't "display: table-cell;" not work in IE through v7?
Matt Dunnam
2008-10-08 18:26:02
A:
- Copy dContainer and place the copy immediately after it.
- Change the ID and the new ID to the #dContainer style.
- Add a new CSS block that has just #dContainer (not the new div) and put "float:left;" in the block.
Dan Goldstein
2008-10-08 15:36:46
+2
A:
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
font-size:205%
}
.dMon {
font-weight:bold;
font-variant:small-caps;
font-size:130%;
margin-top:-.7em;
}
.detailContainer {
vertical-align:middle;
display:table-cell;
padding:0em 0em 0em 1em;
}
#dContainer, #dContainer2 {
border:1px solid green;
display:table;
height:3.25em;
float: left;
}
</style>
<body>
<div id="dContainer">
<div class="dDay">31</div>
<div class="dMon">sep</div>
</div>
<div id="dContainer2">
<div class="dDay">31</div>
<div class="dMon">sep</div>
<div class="detailContainer">Test O.O</div>
</div>
</body>
</html>
Abyss Knight
2008-10-08 15:36:55
It would probably be better to make "dContainer" a class and then just resuse it, rather than having seperate id's for it. They do the same thing afterall
qui
2008-10-08 15:37:44
Yep, of course. I just put this together in a few seconds to make life easier for the OP in testing. Also, you'll need to issue a clear before any other block or inline level elements, I believe.
Abyss Knight
2008-10-08 15:45:50
A:
<html>
<head>
<title>Testing some CSS</title>
<style type="text/css">
.dDay {
font-size:205%
}
.dMon {
font-weight:bold;
font-variant:small-caps;
font-size:130%;
margin-top:-.7em;
}
.dDate {
display:table-cell;
}
.detailContainer {
vertical-align:middle;
display:table-cell;
padding-left:1em;
}
#dContainer {
border:1px solid green;
display:table;
height:3.25em;
}
</style>
<body>
<div id="dContainer">
<div class="dDate">
<div class="dDay">31</div>
<div class="dMon">sep</div>
</div>
<div class="dDate">
<div class="dDay">31</div>
<div class="dMon">sep</div>
</div>
<div class="detailContainer">Test O.O</div>
</div>
</body>
</html>
[EDIT] Looking at the other answers:
- Float is of course the right answer, I just went with the initial logic, actually finishing it (making a real table might be actually the logical final step...)
- Note: doesn't look nice in IE (6, 7).
PhiLho
2008-10-08 15:38:39
A:
Is there any reason why you can't use <span> tags instead of <div>'s? That way your page would still make sense when read without CSS.
Ian Oxley
2008-10-09 08:42:20