utilizing the float property in CSS without specifying a width

Question

utilizing the float property in CSS without specifying a width

Below is the structure of my HTML:

<div class="content">
    <div class="icon"></div>
    <div class="text">I have a long message that wraps into two lines.</div>
    <div style="clear:both"></div>
</div>

Accompanied by the following CSS:

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

I am seeking a way to align the icon and text components on the same line without the use of any relative or absolute width values.

You can view an example in this fiddle - http://jsfiddle.net/7kNSs/

html css css-float

Answer 1

Answer №1

Get rid of the CSS float declaration in the .text class.

Check out this Fiddle link

HTML code :

 <div class="content">
    <div class="icon"></div>
    <div class="text">Some lengthy message text that wraps to two lines.</div>
    <div style="clear:both"></div>
</div>

CSS code :

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

Answer 2

Get rid of the CSS float declaration in the .text class.

Check out this Fiddle link

HTML code :

 <div class="content">
    <div class="icon"></div>
    <div class="text">Some lengthy message text that wraps to two lines.</div>
    <div style="clear:both"></div>
</div>

CSS code :

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

Answer 3

Answer №2

To remove the extra .text div, simply follow these steps:

<div class="content">
    <div class="icon"></div>
    Some lengthy message text wrapped over two lines.
    Some lengthy message text wrapped over two lines.
    Some lengthy message text wrapped over two lines.
    Some lengthy message text wrapped over 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}

View the updated fiddle here: http://jsfiddle.net/Milanzor/tfrH6/

Answer 4

To remove the extra .text div, simply follow these steps:

<div class="content">
    <div class="icon"></div>
    Some lengthy message text wrapped over two lines.
    Some lengthy message text wrapped over two lines.
    Some lengthy message text wrapped over two lines.
    Some lengthy message text wrapped over 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}

View the updated fiddle here: http://jsfiddle.net/Milanzor/tfrH6/

Answer 5

Answer №3

update text class by removing float property

html

<div class="content">
    <div class="icon"></div>
    <div class="text">A lengthy message split over 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;}

Answer 6

update text class by removing float property

html

<div class="content">
    <div class="icon"></div>
    <div class="text">A lengthy message split over 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;}

Answer 7

Answer №4

Here is an alternative line of code:

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

Try replacing the original line with this one

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

Answer 8

Here is an alternative line of code:

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

Try replacing the original line with this one

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

utilizing the float property in CSS without specifying a width

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Guide to ensuring child elements inherit parent's width in Bootstrap 4

Error: The specified element to insert before is not a direct descendant of this parent node

Is there a way to display a loader when an item is selected from a dropdown menu? For example, while data is being fetched from the backend, can we

SVG Star Rating system designed to accommodate ratings with decimal points

``There seems to be a problem regarding the alignment of elements in

updating the content of a webpage using innerHTML on Squarespace platform

Is it possible to modify the color of a bootstrap navbar dropdown upon clicking?

Customizing the direction of Ext.menu.Menu involves modifying the menu's orientation to

Customizing Bootstrap Styles in Angular: How to Override Specific Classes

Content from ajax request is invalid

Leverage Javascript to interact with a complex Select HTML element through automation

What are some effective ways to utilize localstorage efficiently?

Dynamic presentation created with Serif software

What is the proper way to specify the background image path in CSS?

Implementing a validation step prior to executing a redirect in an Ajax request

Is it possible to use a variable for the value attribute in a select option?

Creating responsive images with Bootstrap 5

Display a snippet of each employee's biography along with a "Read More" button that will expand the content using Bootstrap, allowing users to learn more about each team

Preserving the HTML format of a string stored in MongoDB: Best practices

Strange outcomes observed with array created from HTML code