• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 223
  • Last Modified:

Floating and clearing tables

Hello

I need to clarify the use of clear.

I have two tables on a page.  I want them both to float left.

The first table on the page I have given this id:  TableFloatLeft  
and its css is

Table#TableFloatLeft;
float:left;
}

I have another table on the page that I want to have directly below it.

I haven't given it an ID yet or any css.  Waiting for your response here.

From what I have googled, at some place I need to insert a clear.  But I am not sure where I add the clear.

I have a feeling I add it to the css of the second table.

In my next comment I will give you a link to the page, work in progress.

Thanks!
0
Rowby Goren
Asked:
Rowby Goren
  • 3
  • 3
  • 2
1 Solution
 
Rowby GorenAuthor Commented:
Here's the link to the page.  You'll see a bunch of <p>&nbsp;</p>'s in the source. They are only there temporarily to give you an idea of what I want the page to look like with the <p>&nbsp;</p>'s

Thanks

Link to test site
0
 
Chris StanyonCommented:
There is no CSS in your page to float the table left and I can't see a reason why you'd need it. Forget about the floats on the tables and they'll just drop under one another by default - no need to mess with it.

You do have an align="left" attribute on both your tables which not supported in HTML5, so remove that and all will be well :)
0
 
GaryCommented:
With bootstrap you can add a class of clearfix to the second table.
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
GaryCommented:
Wrap your first table in
<div class="row">
...
</div>
0
 
Rowby GorenAuthor Commented:
Hi

Removing align left worked fine.  The tables are now stacked as needed.  

However I am wondering what any additional advantage would be using Cathal's suggestions. Since this is using twitter bootstrap.

I will be splitting points so perhaps we can have a brief discussion on the advantages of adding  the class "row" /  clearfix to the second

I will be using the page as a template for others to use on this site, so I would like to optimize the layout as well as I can.

However, as I said, just removing the align left seems to fix it

AND the image table rearrange themselves reasonably well  on a cell phone. I assume that is thanks to twitter bootstrap?

Link to test page

Rowby
0
 
GaryCommented:
The .row is just using Bootstrap to declare the div takes up all the width.
Don't split points - Chris was spot on, I missed the link initially.
0
 
Chris StanyonCommented:
The formatting you have has nothing to do with bootstrap - just left to it's own devices it will work as you expect. The images realigning themselves is default behaviour - if there's not enough room on the line they'll drop to the next (now that you've removed the table!)

There is no advantage in adding a .row wrapper DIV - a table is a block level element by default, so wrapping one block in another serves no purpose in your case
0
 
Rowby GorenAuthor Commented:
Thanks!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 3
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now