using css float without width

Question

I have a html structure like this:

<div class="content">
    <div class="icon"></div>
    <div class="text">Some long message text which is wrapped in two lines.</div>
    <div style="clear:both"></div>
</div>

and corresponding css:

.content {width:300px; margin:30px auto; border:1px solid #000}
.icon {width:40px; height:40px; background-color:maroon}
.icon, .text {float:left}

I want to align icon and text componenent in one line without using any relative and absolute width value.

Here is a fiddle - http://jsfiddle.net/7kNSs/

akash · Accepted Answer · 2013-12-24 09:17:09Z

2

Remove CSS float property form .text

Try Fiddle

HTML :

 <div class="content">
    <div class="icon"></div>
    <div class="text">Some long message text which is wrapped in two lines.</div>
    <div style="clear:both"></div>
</div>

CSS :

   .content 
        {
      width:300px; margin:30px auto; border:1px solid #000;
        }
   .icon 
        {
        width:40px; height:40px; background-color:maroon; float:left;
        }

edited Dec 24, 2013 at 9:17

akash

2,1674 gold badges21 silver badges32 bronze badges

answered Dec 24, 2013 at 9:10

Manoj

1,8881 gold badge13 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Milanzor · Accepted Answer · 2013-12-24 08:43:03Z

0

All you gotta do is take out the .text div:

<div class="content">
    <div class="icon"></div>
    Some long message text which is wrapped in two lines.
    Some long message text which is wrapped in two lines.
    Some long message text which is wrapped in two lines.
    Some long message text which is wrapped in two lines.
    <div style="clear:both"></div>
</div>

.content {width:300px; margin:30px auto; border:1px solid #000}
.icon {width:40px; height:40px; background-color:maroon}
.icon, .text {float:left}

Check the forked fiddle: http://jsfiddle.net/Milanzor/tfrH6/

answered Dec 24, 2013 at 8:43

Milanzor

1,93014 silver badges22 bronze badges

Comments

akash · Accepted Answer · 2013-12-24 09:16:14Z

0

remove float form text class

html

<div class="content">
    <div class="icon"></div>
    <div class="text">Some long message text which is wrapped in two lines.</div>
    <div style="clear:both"></div>
</div>

css

  .content {width:300px; margin:30px auto; border:1px solid #000}
.icon {width:40px; height:40px; background-color:maroon;float:left;}

edited Dec 24, 2013 at 9:16

answered Dec 24, 2013 at 8:42

akash

2,1674 gold badges21 silver badges32 bronze badges

Comments

junior developper · Accepted Answer · 2013-12-24 08:46:50Z

-1

Try to change this line .content {width:300px; margin:30px auto; border:1px solid #000} by this

#content { overflow: hidden;width:300px; margin:30px auto; border:1px solid #000}

answered Dec 24, 2013 at 8:46

junior developper

4462 gold badges19 silver badges41 bronze badges

Collectives™ on Stack Overflow

using css float without width

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related