Table or not to Table – in TwentyEleven

Using CSS.
CSS Tutorials
Learning CSS

OK, thanks…I think. Any further direction other than the ROOT of CSS?

Do you have a suggestion for the type of CSS formatting that allows for multiple columns in a page (not sidebars)? Columns that are independent of each other. In other words, I don’t want the content from column one to spill or overflow into the second. Are you suggesting “CSS Multi-column Layout Module“? Or is there something else that would work better?

Once the CSS styling is defined, how does one define which widget goes where using the Page creation/WP HTML editor?

Additionally, do you know of any examples/sample code of doing this within WP. THIS would be very helpful!

I’m sorry but it is beyond the scope of these forums to deal with these kinds of basic CSS issues. Try a dedicated CSS resource such as https://www.css-discuss.org/ instead.

Also have a look at the way twenty eleven puts the three footer widgets side by side.

in functions.php there is a function (line:457)

twentyeleven_footer_sidebar_class()

Based on the number of active widgets it will return a class, one, two or three

Then look in style.css (line:2206 to 2224)

/* Two Footer Widget Areas */
#supplementary.two .widget-area {
	float: left;
	margin-right: 3.7%;
	width: 48.1%;
}
#supplementary.two .widget-area + .widget-area {
	margin-right: 0;
}

This is just s part the style block, you could use or copy these styles to use for your content areas, they will also be responsive when the browser is resized, not sure if it is #page or #content.

/* Two Footer Widget Areas */
#page.two .widget-area {
	float: left;
	margin-right: 3.7%;
	width: 48.1%;
}
#page.two .widget-area + .widget-area {
	margin-right: 0;
}

Add in a style to clear both

.clear-both{
        clear:both;
}

So the divs will look like!

<div class="two">
   <div class="widget-area">
      <!-- Content One Here -->
   </div>
   <div class="widget-area">
         <!-- Content Two Here -->
   </div>
</div>
<div class="clear-both"></div>

HTH

David

David thank you so much. Yes, this is very helpful. Off to investigate further and will respond with what I figure out for my layout needs. I think there may be others that would like to know how to do this as well. Again, thanks!

As a side…why is it not recommended to use tables for this?

I think the problem with tables is when you need to nest them, I cannot see why you should not use them for a simple row!

There are basic table styles in the twenty eleven style.css, I think for me that divs are easier to understand, layout and to use!

David

Thanks David, nice link. I have been looking into the table styling in the twenty eleven style.css and found:

.entry-content table,
.comment-content table {
	border-bottom: 1px solid #ddd;
	margin: 0 0 1.625em;
	width: 100%;
}

I think there may even be additional styling in dark.css of twentyeleven.

Pulled out the “.entry-content table” element and have been adding my own arguments. This has allowed me to control the styling but this is global and will affect all content tables, so not the best for my needs.

I could add conditional styling for just this page via:

body.page-id-XX #content div.entry-content {
    padding-left: ...;
}

(where ‘XX’ is the page ID) but that is more to manage in the CSS and don’t think it is worth the effort of just this usage on one page.

I think you have sent me in the right direction. Thanks again!