CSS - float causing undesired render

Question

My CSS:

body
{
    font-family:verdana;
    line-height:1.5em;
    color:#666;
    font-size:0.8em;
}

.objectAttributesOuter
{
    border: 1px solid #999;
    padding:6px;
    margin:6px;
    background-color:#EDEEFA
}


.objectAttributes
{
    padding: 5px, 0px, 5px, 5px;
}


.whiteBoxWithBorder
{
    padding:5px;
    margin-right:5px;
    background-color:#fff;    
    border: solid 1px #ccc;
    float:left;
}

My HTML:

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<HTML>
<HEAD>
<meta name="GENERATOR" content="Microsoft&reg; HTML Help Workshop 4.1">
<Title>Details</Title>
<link rel  = "stylesheet" href="css.css" type = "text/css" />
</HEAD>
<BODY>


<div class = "objectAttributesOuter">
    <div class="objectAttributes">
         <div class="whiteBoxWithBorder">
                GetType()
         </div> 
         <div class="whiteBoxWithBorder">
                Returns the type ...
         </div>
    </div>
</div>


</BODY>
</HTML>

The ideal render would be to have the "whiteBox" rendered inside the "objectAttributesOuter" but as you can see it overlaps. If I remove the float tag, then the 2 divs render inside the whiteBox but, do not display side by side.

Any ideas how I can have them display side by side within the "objectAttributesOuter" tag?

Various techniques: http://www.quirksmode.org/css/clearing.html — jfrej, Jul 20 '12 at 13:54

score 2 · Answer 1 · answered Jul 20 '12 at 14:00

2

Check this out myFiddle

Use <div style="clear:both"></div>

answered Jul 20 '12 at 14:00

Random Guy

2,878
5
20
32

score 0 · Answer 2 · answered Jul 20 '12 at 13:47

0

Try putting overflow:auto on .objectAttributes and see if that helps.

It would also help if you had widths on your container and the floating elements.

answered Jul 20 '12 at 13:47

Billy Moat

20,792
7
45
37

score 0 · Answer 3 · answered Jul 20 '12 at 13:49

0

Put a float:left on objectAttributesOuter:

.objectAttributesOuter
{
    border: 1px solid #999;
    padding:6px;
    margin:6px;
    background-color:#EDEEFA;
    float:left;
}

answered Jul 20 '12 at 13:49

Lowkase

5,631
2
30
48

score 0 · Accepted Answer · answered Jul 20 '12 at 13:52

0

Change objectAttributesOuter class as follow;

.objectAttributesOuter
{
    border: 1px solid #999;
    padding:6px;
    margin:6px;
    background-color:#EDEEFA;
    overflow:auto;
}

answered Jul 20 '12 at 13:52

Narendra

3,069
7
30
51

CSS - float causing undesired render

4 Answers4