Member Avatar for Monkey101

For my webpage I want to set up columns (boxes). For example I have an image floating to the left then I want to float another image or a plain box underneath the image.

This is my HTML code

    <div style="float: left; background-color: white;">
    <img src="Images/Books.jpg" alt="Books" width="225" height="125"/>
    </div>

    <div id="left-col">some text</div>

My image is floating left and I want my left column to float underneath it. I tried using the <br> tag but if I want to include a center column the <br> would not work...

This is my CSS code

#left-col 
 {
position: ;
float: left;
height: 300px;
width:225px;
background-color: white;
margin-bottom: 10px;
}
  • 2 Contributors
  • 2 Replies
  • 220 Views
  • 49 Minutes Discussion Span
  • Latest Post Latest Post by Monkey101
Member Avatar for GliderPilot 
    <div style="float: left; background-color: white;">
    <img src="Images/Books.jpg" alt="Books" width="225" height="125"/>
    </div>

    <div class="clear: both;">&nbsp;</div>

    <div id="left-col">some text</div>
Member Avatar for Monkey101

I am confused by the clear property. I know clear: both; will not allow floating elements on either the right and left side. I applied it to my code to see if it worked (which it did).
Then I added another column and centered it

    <div style="float: left; background-color: white; ">
    <img src="Images/Books.png" alt="Books" width="225" height="125"/>
    </div>

    <div id="central-col">some text</div> 

    <div id="left-col" style="clear: both;">some text</div>

In order for my centered column not be affected is placing it above

<div id="left-col" style="clear: both;">some text</div>

why is that?

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.