Floats or Table for sidebar?

valarcher · July 4, 2015, 1:09pm

Hi - Ralph mentioned in wordpress forum this is the old-fashioned way to do a sidebar

#container, #sidebar {margin: 0; padding: 0;}
#container {width: 70%; float: left;}
#sidebar {width: 30%; float: right;}

Does that mean it’s switched to being a table now too? So it’s now:

#container{display:table;width:100%;max-width:1200px;table-layout:auto;}
.content, .sidebar{display:table-cell;vertical-align:top;}
.content{width:70%;}

This is my test page (done in floats):
http://dev.greensmoothie.com/test/

thank you! - Val

PVgr · July 4, 2015, 2:19pm

Both ways are perfectly valid, depending on the situation. In your case, tables are OK but floats still have an extra benefit — source order does not matter. You could also use inline-blocks or the Flexbox method, with fallbacks to floats (probably) depending on your users’ browsers.

ralphm · July 5, 2015, 4:39am

I only meant old-fashioned in the sense that there are newer methods for doing this—as mentioned above—though floats are still perfectly fine for this purpose, and are probably the best supported in browsers. In the next few years, floats for column layouts will become truly outmoded, but we’re not quite there yet.

Internetum01 · July 5, 2015, 10:26am

In the container I suggest that you use width 60 per cent and add a margin of 1 per cent.
For sidebar make width 28 per cent and use a margin of 1 per cent to make it look better for back-end.
Also, you may want to add padding of 10px for responsiveness of your site

valarcher · July 6, 2015, 9:31am

Hi Ralph

In the next few years, floats for column layouts will become truly outmoded

oh dear, that’s what I want to avoid. I want to program it now and never have to look at it again! Shall I use tables now? They’ve been around since I went up in 1997/8. Or what do you suggest? I don’t know what inline-blocks and flexbox is.

Hi internet - thank you for your feedback on widths etc.

Blake_Zoe · July 6, 2015, 9:44am

Both ways are perfectly valid, depending on the situation. The second way is getting more and more popular now. It’s easy to operate and learn.

PaulOB · July 6, 2015, 9:54am

The question you need to ask "is the method I am using working and doing what I want"?

If so then it will work forever and you won’t have to worry about it. There is no need to jump on to new css3 features unless you want the features and flexibility that they offer.

Display:table properties and floats will always work. They won’t stop working just because flexbox and grid layouts arrive on the scene.

If on the other hand you want the ability to swap columns around and have more flexible column arrangements then you can look at flexbox (although flexbox is actually more complicated than anything that went before and is not without its own implementation problems).

I would advise that if you are happy with source order that you use the display table and table-cell properties to create your columns as these are very robust structures and don’t need fixed widths like floats.

valarcher · July 6, 2015, 10:07am

oh dear Paul you always introduce new concepts that discombobulate my brain! I googled this:

but still don’t understand what source order is!

Ok I’ll take your advice and go with tables! When have I ever not followed you? haha if you decide to apply for christhood and need a disciple, look me up first

PaulOB · July 6, 2015, 10:40am

Source order is simply the order that the html has been coded,

e.g.

<h1>Heading</h1>
<div>Content</div>

The h1 is first in ‘source order’ because you want it at the top of the page and then the content follows

That’s fine for linear content but when you have 2 or more columns the source order of the html will depend on the method you use to construct the layout. That means that you are basing your structure on presentational aspects which is not really semantically correct but of course may be a necessity because of the layout restrictions.

For example floated content must come first in source order when you want following content to be alongside (ignoring tricks for now). Or for a table type layout each column must be n the correct order so you would have a side column and then a main column with the html appearing in source order logically.

e.g.

Here is a 2 column table layout.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	display:table;
	table-layout:fixed;
	width:100%;
	max-width:1200px;
	margin:auto;
	border-spacing:20px;
}
.tc {
	display:table-cell;
	vertical-align:top;
	padding:20px;
	background:#f9f9f9;
}
.sidebar {
	width:220px;
}
</style>
</head>

<body>
<div class="wrap">
		<div class="tc sidebar">
				<h2>Sidebar content goes here</h2>
				<p>sidebar</p>
				<p>sidebar</p>
				<p>sidebar</p>
				<p>sidebar</p>
		</div>
		<!-- end sidebar -->
		<div class="tc main">
				<h1>Main content goes here</h1>
				<p>Main content goes here</p>
				<p>Main content goes here</p>
		</div>
</div>
</body>
</html>

As you can see sidebar is first in source because that’s how the structure works. However as semantics go its not the best choice and if we use flexbox we can start with html structure and have our main content first in source and siply re-order the columns visually.

e.g. a flexbox example.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	display:flex;
	max-width:1200px;
	margin:auto;
	background:red;
}
.tc {
	padding:20px;
	margin:20px;
	background:#f9f9f9;
}
.sidebar {
	width:220px;
	background:blue;
	order:1;
}
.main {
	flex:1;
	order:2;
}
</style>
</head>

<body>
<div class="wrap">
		<div class="tc main">
				<h1>Main content goes here</h1>
				<p>Main content goes here</p>
				<p>Main content goes here</p>
		</div>
		<!-- end main -->
		<div class="tc sidebar">
				<h2>Sidebar content goes here</h2>
				<p>sidebar</p>
				<p>sidebar</p>
				<p>sidebar</p>
				<p>sidebar</p>
		</div>
		<!-- end sidebar --> 
</div>
</body>
</html>

The main column is first in source because its the main content but when presented appears to be the second column visually. This is one of the features of flexbox (there are many more) but does come at the cost of complexity as it is quite a complicated layout system.

valarcher · July 6, 2015, 10:57am

Hi Paul - thanks million for 2-col layout

I’ll have to stick with tables otherwise if I go flex I’ll be haunting the forums till the end of time…

a side column and then a main column with the html appearing in source order logically

so hopefully your example is a left sidebar with blog content on right? but I’ll go play with it.

.sidebar { width:220px;

I like that, setting a width to sidebar so it holds a specific banner size - http://www.bannercreator.nu/banner-size.html

It’s all so complicated. I guess it’s going to be multiple @media’s to set a max-width for tc so the sidebar will drop down below it and never trigger horiz. scroll.

PaulOB · July 6, 2015, 11:02am

Remember this is nothing to do with html tables This is just css mimicking some of the layout properties of tables.

All you need do is set a media query at the point where the tables become cramped (or before a scrollbar appears) and just set the cells to display:block instead. You don’t need multiple media queries for simple designs.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
	display:table;
	table-layout:fixed;
	width:100%;
	max-width:1200px;
	margin:auto;
	border-spacing:20px;
}
.tc {
	display:table-cell;
	vertical-align:top;
	padding:20px;
	background:#f9f9f9;
}
.sidebar {
	width:220px;
}

@media screen and (max-width:780px){
	.wrap,.tc{width:auto;display:block;border-spacing:0;margin:0 0 20px;}		
}

</style>
</head>

<body>
<div class="wrap">
		<div class="tc sidebar">
				<h2>Sidebar content goes here</h2>
				<p>sidebar</p>
				<p>sidebar</p>
				<p>sidebar</p>
				<p>sidebar</p>
		</div>
		<!-- end sidebar -->
		<div class="tc main">
				<h1>Main content goes here</h1>
				<p>Main content goes here</p>
				<p>Main content goes here</p>
		</div>
</div>
</body>
</html>

valarcher · July 6, 2015, 11:19am

thanks million! I’ll go work on this. I understand it’s css mimicking table layout properties but to me the only diff is that we no longer have to change every page as Craig mentions here in in his first para – we’re still creating the layout with tables, and tables I can visualize - e.g. they have a fixed top line and bottom line across all the cells in the table - whereas I don’t know how to visualize a flexbox.

If flexbox is the future, then maybe one day it’ll have a wavy top & bottom line like a mountain and valley – just as boxes grew round corners.

valarcher · July 6, 2015, 3:17pm

Hi Paul - sorry I didn’t do it exactly as you said because I wanted to stick to the blankslate theme and use id’s (#container, Content, #sidebar) and not classes.

(1) Re:

#container {border-spacing:20px;}

I only need 20px between Content and #sidebar. How do I do that? I tried the way I did it before:

.boxsub .boxlft{padding-right:25px;} /*space betw subscribe+postit*/

but that doesn’t work.

(2) I need Content to

a) push #sidebar as far as possible over to the right, and

b) have a max-width, e.g. for tv or your 29", and

c) to be centered

How do I do that? I’m not sure if - margin:auto; - will center it? I can’t check because my screen is only 19".

thank you! - Val - see latest: http://dev.greensmoothie.com/

P.S. will add @media tomorrow

PaulOB · July 6, 2015, 5:13pm

Thats what the border-spacing does in my example. It puts 20px space between the columns. It also puts 20px on the outside edge of the column but that shouldn’t be an issue here as you have nothing special to align with.

There is no such thing as margin on table-cells. You can add padding inside the cell or border-spacing outside the cell.

Sidebar will automatically go to the right just like a table-cell. You cannot push table-cells anywhere.

Its not working for you because you have not made sidebar a table-cell; it’s still display:block. (I already gave you a minimum example anyway so please refer to that if you are unsure.)

Also you have div class="clear after the #sidebar and that will upset the calculations as you don’t need clearers on table-cells. Remove that div class=clear and apply the display:table-cell and vertical-align:top to #sidebar.

It is centred! Margin:auto on the display:table-element centers the whole thing. If you want to center content in the cells then use the usual centring methods but the comment doesn’t really make sense as the display:table element is centred.

I gave my demo a max-width so that question doesn’t really make sense either. Just set the max-width that you want combined with width:100% otherwise tables shrink to fit.

valarcher · July 7, 2015, 12:37pm

Hi Paul - sorry I just copied your code for sidebar

.sidebar{width:220px;}

and forgot to add the display table cell. I’ve clicked it now, you define the table then tell the elements inside that they’re table cells.

border-spacing - 20px

problem is it added 20px space to the left of content as well. I need as much blog space as possible.

You can add padding inside the cell

thank you! I added a padding-left to sidebar. The logic is always so obvious when you say it (no margins on table cells) but it’s hard for me to think of every little logical thing when doing it!

(1) The sidebar does not obey 0 auto and displays on the left instead of in center, when it drops below content

@media screen and (max-width:780px){
    #container,#content{width:auto;display:block;margin:0 0 20px;}
    #sidebar{margin:0 auto;}}

(2) Really funny problem. I decided to put each banner ad in a box, and now the banner suddenly grows bigger!

This is the size it should be (250px wide banners):

This is how it displays when I put it in a box (as you can see it also pushes away the padding between sidebar & content):

(3) I want to get the sidebar down to 310px max width so when it drops down it fits within iphone viewport (320 but I like that spare 5px on each side). Currently I have:

width:290px;padding-left:20px = 310
images of 250px (when they display at their right size!) with 0px L/R margin or padding
inside a box with 0px L/R margin or padding

So it should fit but google complains that sidebar falls outside the viewport:

http://www.google.com/webmasters/tools/mobile-friendly/?url=http%3A%2F%2Fdev.greensmoothie.com%2F

Google says: “The page content is 482 CSS pixels wide, but the viewport is only 320 CSS pixels wide. The following elements fall outside the viewport:…” [and then it names all the sidebar elements]

How does google get 482 when I get 310?

thank you! - Val - latest at http://dev.greensmoothie.com/

PaulOB · July 7, 2015, 3:08pm

You have a rule that sets images to 100% wide so that they can scale up and down. If you want a fixed width on those images then add a class to them and over-ride the width:100% rule.

This is the original:

.box img {
  width: 100%;
  height: auto;
}

Add a class to that image and then over-ride it.

e.g.

.box img.adbox {
  width: 250px;
  height:162px;/* or whatever it should be */
}

You still have the sidebar as a display:table-cell at the smaller width in the media query when you really want it display:block (as already done for Content and #container). You also need to remove the 20px left padding from sidebar at the smaller width.

Your postitnote is still causing a scrollbar (which i have mentioned a couple of times now) and you need to make it go into one column sooner.

e.g.

@media screen and (max-width:810px){
	.boxsub .boxlft,.boxsub .boxrgt{display:block;margin:10px auto;}
}

You have some conflicts in your sizings also. #sidebar has a width of 290px yet you insert a box inside it that has a min-width of 300px. It’s not a ‘Tardis’ and the inner cannot be bigger than the outside Make sure your rules make sense and remove that min-width of 300px.

Your header is still too wide for 320px screens (iphone 5). Reduce the logo width at small screens sizes.

The click to Subscribe button is also too wide for 320px screens so you may want to reduce the number of words or reduce the left and right padding at widths of less than 350px approx.

valarcher · July 8, 2015, 7:33am

Hi Paul – thank you! I clicked that .box thing in my sleep last night. I’d forgotten I had an earlier .box rule planned for banners later on.

postitnote is still causing a scrollbar (which i have mentioned a couple of times now) and you need to make it go into one column sooner.

I’m sorry. I never see the scrollbar in chrome. So I thought fixing “end” on the menu had fixed it.

@media screen and (max-width:810px)

I think I was going the wrong way? I did try in the mists of distant past a 650px but that didn’t make any diff. You’ve upped it from 720px to 810px. I thought 650 would tell it to drop sooner and 810 would tell it to drop later.

sidebar has a width of 290px yet you insert a box inside it that has a min-width of 300px

Does this fix it? It seems to (newbox is adbox).

.box{max-width:728px;min-width:300px;margin:auto;}
.box img{width:100%;height:auto;}
.box img.newbox{width:250px;height:auto;}
#sidebar .newbox{margin:20px 0;padding:10px 0;background:#fff;border-radius:10px;}
#sidebar .newbox img{margin:0 auto 10px;}

then before any img in sidebar, I have <div class="newbox">

header is still too wide for 320px screens (iphone 5). Reduce the logo width

I intentionally asked artist to make the logo width 310px so it would fit in iphone. I don’t know how to contact her again as it was through freelancers. Why does 310 not fit inside 320, and its margin & padding are 0?

click to Subscribe button is also too wide for 320px screens

Is this correct?

.awbox .submit{clear:both;margin:10px auto 0;padding:4px 12px;background:#ffffa0;font:13px Arial,sans-serif;}
@media screen and (max-width:350px)
    {.awbox .submit{padding:4px;}}

thanks million, Val

valarcher · July 8, 2015, 8:17am

Hi – how do I make the top margin 0 on the first box in sidebar? So it lines up with content in one straight line under menu? I tried this but it does not work:

#sidebar .newbox{margin:20px 0;padding:10px 0;background:#fff;border-radius:10px;}
#sidebar .newbox .first{margin:0;}

<div class="newbox first">

thank you! - Val - http://dev.greensmoothie.com/

PaulOB · July 8, 2015, 10:44am

When you have multiple classes you use the dot notation to string them together.

e.g. .newbox.first not .newbox .first

#sidebar .newbox.first {margin:0;}

Remember that a space between selectors in the css is a descendant selector.

Haven’t had time to look at your other queries yet but I’ll be back later on in the day.

PaulOB · July 8, 2015, 9:02pm

810px is the width at which the media query will take effect (which means that for a max-width media quiery the rules will be applied to anything that is 810px or smaller; which is what is needed here).

Because your wrapper is only 97% wide which means it is smaller than that image and thus the image pokes out.

You need something like this:

@media screen and (max-width:340px){
.logo,
.logo img{width:90%;margin:auto;height:auto;display:block}
}