Never a table for layout, these days. Floated, fixed-width, divs would be far cleaner.
That’s great!
So I had a Table that is 3 wide, and several long, you can see what I am doing here. Is there a cleaner way to specify the width so the three items are just divided evenly? Also, I can see how to make a margin, but how can I pad the first row from the second?
Thanks so much!
<div>
<div>
<div style="float:left; width:33%">img link<BR>Text<BR>Button Code</div>
<div style="float:left; width:33%">img link<BR>Text<BR>Button Code</div>
<div style="float:left; width:33%">img link<BR>Text<BR>Button Code</div>
<div style="clear:both">
<div style="float:left; width:33%">Cell 1</div>
<div style="float:left; width:33%">Cell 2</div>
<div style="float:left; width:33%">Cell 3</div>
</div>
<div style="clear:both">
<div style="float:left; width:33%">Cell 1</div>
<div style="float:left; width:33%">Cell 2</div>
<div style="float:left; width:33%">Cell 3</div>
</div>
</div>
How about:
MARKUP:
<div class="thumbs-container">
<div class="one">img link<span class="text">Text</span><span class="button">Button Code</span></div>
<div class="two">img link<span class="text">Text</span><span class="button">Button Code</span></div>
<div class="three">img link<span class="text">Text</span><span class="button">Button Code</span></div>
<div class="one">Cell 1</div>
<div class="two">Cell 2</div>
<div class="three">Cell 3</div>
<div class="one">Cell 1</div>
<div class="two">Cell 2</div>
<div class="three">Cell 3</div>
</div>
STYLESHEET
.thumbs-container div {
width:33%;
float:left;
margin:0;
padding:0;
}
.thumbs-container . one {
clear:left;
margin-top:20px;
}
.thumbs-container span {
display:block;
}
Very slick, so how does it know to only span 3 across? In an online rendering tool I use, it works (I just embedded the CSS in between <STYLE type=”text/css”></STYLE> tags.
But inside my blog it lines up vertically when I use the HTML editor, I switched to Visual and back, and noticed it commented out the style tags!
How can I embed this inside the page in the html editor so I can easily manipulate it?
Thank you very much for all your help!
how does it know to only span 3 across?
Because of the width:33% value. If you add any left/right margins to the boxes, you may have to reduce that value by a percentage or 2.
inside my blog it lines up vertically when I use the HTML editor
Neither editing tabs will ever give a really accurate representation of the final layout.
I switched to Visual and back, and noticed it commented out the style tags
Never switch from one editing tab to the other. Use just one tab for a given page/post and then stick to using that tab every time with that page/post. As you’ve seen, switching back & forth causes problems.
How can I embed this inside the page in the html editor so I can easily manipulate it?
If it was me, I’d just add the code via the HTML tab and add the CSS to the theme’s stylesheet. Then I’d tweak the CSS as required.
