border around div with inner divs that float left
Posted: Thu Jan 14, 2010 7:08 pm
So, you want to have divs that float to the left, and then have a surrounding div with a border? But what happens is that the outer div is rendered with no inner area and looks like a collapsed line and the inner divs float left ontop of it?
a simple fix is the following: just make your outer div have a width setting, so it can render without an unknown value which causes the collapse problem
CSS
.dropdown
{float:left;padding:8px;}
.eventArea
{width:600px;border:solid;border-width:1px 1px 1px 1px;}
HTML
<form name="event" action="add_events.php" method="POST">
~<div class="eventArea">
~~<div class="dropdown" id="month" class="month">month</div>
~~<div class="dropdown" id="day" class="month">day</div>
~~<div class="dropdown" id="year" class="month">year</div>
~</div>
</form>
a simple fix is the following: just make your outer div have a width setting, so it can render without an unknown value which causes the collapse problem
CSS
.dropdown
{float:left;padding:8px;}
.eventArea
{width:600px;border:solid;border-width:1px 1px 1px 1px;}
HTML
<form name="event" action="add_events.php" method="POST">
~<div class="eventArea">
~~<div class="dropdown" id="month" class="month">month</div>
~~<div class="dropdown" id="day" class="month">day</div>
~~<div class="dropdown" id="year" class="month">year</div>
~</div>
</form>