Code Answer: How can I get a section of this div to sit next to each other?

Code and preview: what i have

<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 {
    border:1px solid green;
    display:table;
    height:3.25em;
    }
</style>
<body>
<div id="dContainer">
    <div class="dDay">31</div>
    <div class="dMon">sep</div>
    <div class="detailContainer">Test O.O</div>
</div>
</body>
</html>

My question is: is it possible to place another date section next to the first one, so it appears like this: what i want

EDIT: strange, I tried floating before I asked the question and it didn't work...thanks everyone :D

From stackoverflow

use style="float:left" on each DIV (either directly or via a stylesheet)

Anders : I assume I would have to make an additional div to contain the date and month then float that correct?

Matt Dunnam : won't "display: table-cell;" not work in IE through v7?
float:left if you want block elements to sit next to each other.
1. Copy dContainer and place the copy immediately after it.
2. Change the ID and the new ID to the #dContainer style.
3. Add a new CSS block that has just #dContainer (not the new div) and put "float:left;" in the block.

<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>

qui : 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

Abyss Knight : 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.

<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).

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.

Code Answer

Monday, February 21, 2011

How can I get a section of this div to sit next to each other?

0 comments:

Post a Comment

Blog Archive