# CSS div / column layout problem
**URL:** https://forum.kirupa.com/t/css-div-column-layout-problem/63537
**Category:** web dev
**Created:** [September 7, 2004, 7:23pm UTC](https://forum.kirupa.com/t/css-div-column-layout-problem/63537 "2004-09-07T19:23:31Z")
**Posts on this page:** 4
**Page:** 1
### Author:  [@GOLGO\_13](https://forum.kirupa.com/u/GOLGO_13)
#### Post date: [September 7, 2004, 7:23pm UTC](https://forum.kirupa.com/t/css-div-column-layout-problem/63537/1 "2004-09-07T19:23:31Z")
i’ve been looking at this tutorial:[**http://www.webreference.com/authoring/style/sheets/layout/advanced/**](http://www.webreference.com/authoring/style/sheets/layout/advanced/) and i really like the ideas… but i must be _ **slow** _ or something, cause i cant seem to use those ideas to create my own layout. **(see attached gif)** i’m hoping somebodyhere could show me what i need to do to create this layout using div/span tags and… comment the code. i’m assuming for anybody who understands those techniques well, it’d only take a minute or two…
however if i’m mistaken, and thats actually a lot of work, then maybe somebody could point me to some other tutorials that might be a little eaiser for me to follow? or maybe to a layout online somewhere that is like what i’m trying to do?
**thanks a zillion!!**
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 7, 2004, 11:50pm UTC](https://forum.kirupa.com/t/css-div-column-layout-problem/63537/2 "2004-09-07T23:50:50Z")
Here bud… all CSS all DIVs, to see it just copy and paste it into your editor.
```php
Untitled Document
top nav
bottom nav
```
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 8, 2004, 2:03am UTC](https://forum.kirupa.com/t/css-div-column-layout-problem/63537/3 "2004-09-08T02:03:55Z")
**wow! cool! and thanks a lot!!**
a question tho, cause i’m trying to really understand:
why have both a [color=#ff8000] **#leftinner** **[color=black]&[/color]** **#leftmid** [/color][color=black]?? i see that the inner’s widths are set to 96%… and why doesnt [color=#ff8000] **#lower** [/color] have an “[color=darkorange]_#lowerinner_[/color]”? i’m assuming it all has to do with getting things to line up properly - but if you could shed a little light on that, i’d appreciate it![/color]
---
### Author:  [@system](https://forum.kirupa.com/u/system)
#### Post date: [September 8, 2004, 4:26am UTC](https://forum.kirupa.com/t/css-div-column-layout-problem/63537/4 "2004-09-08T04:26:00Z")
Umm… the leftmid and rightmid widths combined are = to the mid width. the leftinner and rightinner the are centered in two parents (leftmid & rightmid) that way they are always the same distance apart, by making it a percentage it makes it equal sizing on the left and right, you can make it a static size if you want. As for the lower inner… since it doesn’t need to be an equal distance or look like it is… it’s basically the child only to the mid and is centered on that.