On Thu, Aug 4, 2011 at 9:33 PM, Chris Kavinsky <ckavin...@gmail.com> wrote:
>
> I have a web page with a section of content floating to the right of the
> main content on the page. Within the main content is a table with a width
> set at 100% to fit the width of the page. The floated content comes first on
> the page so the main content will wrap around it, and it has a left margin
> set in the css. The text wraps the way I want it to, but the table is
> ignoring the float and overlapping the floated text and ignoring the left
> margin on the float.
Well, the table is supposed to take up 100% of the width of its
container, so it can't respect the margin of the content on the right.
The main content respects the margin because it doesn't have a defined
width.
> Any easy way to fix this without sticking the content
> into another div and floating it to the left so the table won't overlap the
> float?
You can put the table into a DIV and set overflow:hidden on that DIV.
The DIV respects the margin and the table is 100% of the width of the
DIV.
I don't remember why this works and I'm not sure I understood it when
I read it anyway, but it does the trick...
<style type="text/css">
div.table-container {
overflow: hidden;
}
table.tabular-data {
width: 100%;
}
div.sidebar {
float: right;
width: 200px;
margin-left: 20px;
}
</style>
<div class="sidebar">
</div>
<div class="table-container">
<table class="tabular-data">
</table>
</div>
Another way would be to put all of your content into a block with
fixed width and position:relative, then move the section to the right
using positioning. This would give you slightly cleaner markup and,
IMHO, look better.
900px wide and centered horizontally:
<style type="text/css">
div.content {
width: 700px;
margin: 0 auto;
position: relative;
left: -100px;
}
table.tabular-data {
width: 100%;
}
div.sidebar {
position: absolute;
width: 200px;
right: -100px;
}
</style>
<div class="content">
<div class="sidebar">
</div>
<table class="tabular-data">
</table>
</div>
--
Ghodmode
http://www.ghodmode.com/blog
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
