CSS the proper way

[webchat]

I’m a tables guy, I have been for years. I have never really seen the point of CSS until I worked out how to created a rectangle with rounded corners. That was easy.

I want to embark properly in to the world of CSS for any future websites I build for myself. I know I’m late in to the world of proper CSS, but I am nearly 40 years old and you can’t teach an old dog new tricks lol.

I have a couple of questions about initial layouts.

1) If your going to layout a site using CSS, should you stick with CSS throughout the whole design, I did try mixing both, a positioned div and a table and it got rather ugly.

2) I put together myself together a demo below, template for the background and a couple of divs that are positioned and overlapped on the screen.

I’m trying to get my head around the following:

Presuming my code is correct, If I wanted to duplicate box1 and box2 again so I have another set of overlapping boxes, would I also need to position these seperately like I have done with box 1 and box2, but call these box3 and box4, or is there another way?

Looking at my code which I guess has some errors, am I going the right way about this in the first place. I am so used to creating my own sites the old fashioned way with tables.

Many Thanks for your help.

CSS

body { background-color:#D9D9D9; margin-top:10px; }

.template { width:900px; height:500px; background-color:ffffff; margin:auto; position:relative; border-radius:15px; }

.box1 { position:absolute; top:150px; left:600px; width:200px; height:200px; background-color:#0033FF; }

.box2 { position:absolute; top:-30px; left:10px; width:100px; height:100px; background-color:#990000; }

HTML

<div class="template">
<div class="box1">
Some Text
<div class="box2">
</div>
</div>
</div>

[wolfcry911]

Hey webchat,

1) there is absolutely no reason to use tables for layout anymore. It takes a little effort, but the CSS learning curve isn’t all that large.
2) I see you’re trying to position all your elements absolutely – the main pitful for many beginners. Absolute positioning can be powerful and definitely has its place – but major layout context is not it.
3) you can teach an old dog new tricks – I’m 45 and coded with tables years ago, but I’m a 100% convert now.

Show us an example of what you’d like to do and I or some other helpful folk here will show you how to go about it.

[simplybikes]

Howdy webchat….I’m 55 and a css convert so no such thing as being too old to learn new techniques. Keep at it.

[Merri]

Back when I started to learn non-tabular layout in around 2004 – 2005 I had a lot of headache with relative and absolute positioning, as I thought I could just have some boxes and place the next box relative to the last one by using specific X and Y coordinates. That just isn’t how CSS works and I couldn’t get anything done properly with that mindset. I had to change my mind.

Instead with CSS you have a flow. Regular blocks (like divs, headers and paragraphs in their default settings) flow only from top to bottom and consume all the space horizontally that is available to them. It’s probably the simplest flow you can think of.

Float is the old friend that many used as an alternative to tables after tables were abandoned. Floats take an element, rip it out of the flow and place it to the extreme left or right unless there already is another floated element in the way. And if there isn’t enough space in the row then the element goes below the other floated elements. The parent element can be hacked to take floated elements inside it into account (for example with clearfix or overflow: hidden;) so that the parent element’s height goes as far down as the bottommost floated element inside it.

As browser support has increased we also got display: table; back into the picture, but it isn’t often a good choice as you can’t swap elements around with it, they always go in the source order. And that is something you couldn’t really do conveniently with floats either: moving later elements from bottom to top isn’t easy to do.

The last warrior of “old school” way to create layout, and that is less known and popular, is the inline-block. It flows like text, which makes it initially harder to understand. People also find it difficult to control space between the elements. But once you start to look at ways CSS allows to control text you’ll start finding some interesting possibilities you can only conveniently do with inline-block: justify, center, direction, vertical-align… these allow for some tricks that can be harder to achieve with floats or tables. Direction for example can swap the order of elements on all rows. Or you can build your design from center instead of making a container box that takes the floated elements that go left and right. It’s a very different way of thinking about layout.

The new school is coming though: the flexbox and the grid (which should not be confused with column grids that are common with responsive sites these days). The flexbox is closer to adoption and every day use, but isn’t yet there for most of the bigger sites. The difference with flexbox to floats and inline-blocks is that it is actually intended for creating layouts. Floats and inline-blocks are hacks. Tables are hacks too, just worse for being bad for the structure of HTML.

[wolfcry911]

Floats and inline-blocks are not hacks…

[Senff]

For people 8-99 years old: http://www.learnlayout.com

[Merri]

Inline-blocks and floats are not hacks as they are, but the way we use them to do layout is quite hacky. I find myself often being forced to do font-size: 0; with inline-blocks to make them work for layout. Same for floats: you need clearfix to really make them work with you. Some very basic stuff such as “all blocks are the same height” is harder than it needs to be, because inline-blocks and floats were not designed for that.

Flexbox is the first thing we have for doing layout properly. No more hacks with two or more unrelated properties or extra elements just to get some basic layout done.

[TheDoc]

@Senff – what about the seven year olds out there? Poor kids! ;)

[bahgheera]

I’ll just chime in here and say that as far as the reason to use CSS as opposed to tables, you may have your mind changed quickly if you visit csszengarden.com.

[webchat]

Just had a look at this site.
http://www.learnlayout.com

Excellent, thank you for the link. Exactly what I was looking for. Certainly answers a lot of my questions especially layouts in css.

[Author]

Posts