What is the right way to structure HTML and CSS?

Here is an example of how I would model the html.

Up vote 2 down vote favorite 1 share g+ share fb share tw.

So, I'm a script monkey at the core. Lately I seem to get stuffed into doing design too for some odd reason and, well, let's just say I should probably have studied better. Either way - What I ask is, what's the Right way to structure a website?

This one has a header with links, then a block with tabs, right under another block which consists of two parts and under those a few others who I'm not at yet. However, the thing is, I need to make a block that consists of two parts that are in the same box but structured independently. I'll try to draw it up.

Browser window..................-X ------------------------------------ |.................Header Links Here| ||Tab|Tab|Tab|_____________........| ||Tab content.............|Small...| ||........................|Section. | ||---Line signing new section------| ||........................|Another. | ||..Content Area..........|Small...| ||........................|Section.

| ------------------------------------ My issue is in the division of small sections and tab/content areas. I tried using floats, making them as tables, aligning and whatnot. The putting float:left on both tables worked.

Kinda. Until I tried to resize the window. So, how do you PROPERLY structure a site like this?

Three divs and tables? Something else? I'll clarify this again: It's the Code to use to create the look above that I'm trying to figure out the proper way to do, not the design As requested here's the current structure I have //Header Links Here Strict Flex Multi-Step From To Leave One Return Return Test Two Test Three Distance -------------|------------ //Slider to be Choice / Choice Show: Price Button!

Sorry if it's messed up in the whitespacing somewhere.. The CSS: body { font-size: 80%; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; background-color: #e2edff; } . Container { margin: 5px 5px 5px 5px; padding: 5px 5px 5px 5px; } . PageBlock { /* To future me: This class is for One Full Screen ideas */ min-height: 300px; } .

TopBlock { text-align: right; color: #000000; } . TopBlock a { text-decoration: none; color: #000000; } . TableLeft { width: 75%; float: left; border-right: dotted 2px black; } .

TableRight { float: left; overflow: auto; } . SmallTable { border-bottom: 1px dotted #c9c3ba; } . Google_map { height: 270px; width: 100%; } html css web-development design link|improve this question edited Jan 2 '11 at 4:10meagar26.3k13058 asked Jan 1 '11 at 19:21Mantar834314 100% accept rate.

3 Write semantic mark-up first, and then try to style that. By all means post a demonstration/sample mark-up for a given page, and we might be able to help you, but this seems to fall outside of a 'code' (Stack Overflow) question, and more towards a 'design' (Doctype) question. – David Thomas Jan 1 '11 at 19:30 I'll the current mess, just a sec – Mantar Jan 1 '11 at 19:31 2 @Meke, personally I'd strip out the table elements, and identify other means of attributing meaning to the contents, whether with ol, ul, dl, div, span, `microformats...laying pages out with tables often works (albeit only for a very limited value of 'works'), but it's not the cleanest way of doing it.

And adds hugely to the work required, later, to maintain/update the page(s). – David Thomas Jan 1 '11 at 20:04 Well, yeah, hence the question to begin with here. :P – Mantar Jan 1 '11 at 20:07 2 Welcome to hell--I mean web design.

:) – musicfreak Jan 1 '117 at 4:23.

Here is an example of how I would model the html. Notes Tableless ;) I would make the tab action an anchor for more flexible styling, I did not demonstrate this in an attempt to prevent bloated CSS in example. I would suggest looking into a CSS framework such as 960 Grid System or Blueprint CSS Framework.

They are not especially necessary in this scenario, but useful none-the-less. The #page > #content structure may be redundant in this specific example. However, I included it because this is correct if you would like to include a #sidebar as a sibling to #content, allowing for the styling of the wrapper #page IMHO the example exemplifies proper usage of IDs and Classes and element hierarchy that is conducive to very flexible styling, RE: CSS Zen Garden Header Link 1 Link 2 Link 3 Tab 1 Tab 2 Tab 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. A section And another just for kicks Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

A section And another just for kicks . Wrapper { width:90%; margin:0 auto; } . Wrapper > div { width:auto; margin-bottom:10px; border-bottom:1px solid #f0f0f0; } .

Section { min-height:200px; margin-bottom:10px; border:1px solid #f0f0f0; border-bottom-width:5px; } . Section > . Left { width:80%; float:left; } .

Section > . Right { width:20%; float:right; } . Tabs ul li { display:inline; background:#f0f0f0; margin-right:5px; } .

Tabs . Tab { display:none; } . Tabs .

Tab:nth-child(0n+1) { display:block; } . Section . Sub-sections .

Sub-section { margin-bottom:5px; background:#f0f0f0; } /* Independently Style Sections Here */ #section-1 {border-color:red;} #section-2 {border-color:green} /* Clear Floated Elements ----------------------------------------------------------------------------------------------------*/ /* http://sonspring.com/journal/clearing-floats */ . Clearfix { clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0; } /* http://perishablepress.com/press/2008/02/05/lessons-learned-concerning-the-clearfix-css-hack */ . Clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } .

Clearfix { display: inline-block; } * html . Clearfix { height: 1%; } . Clearfix { display: block; }.

So, in short, divs, lots of divs? – Mantar Jan 4 '11 at 17:44 Not necessarily. DIVS are used to create division. Once you start adding content in there, proportionately, there will be less DIV.

From this point forward you will likely not require many more, if not any more DIVS. The layout I have provided will allow for very flexible design and styling. Whereas, although your tables may appear more structured and/or clean at first glance, have jail-styling and leave you with a rigid layout.

– DSKVR Jan 4 '11 at 17:49 Some comments: The #wrapper is not always necessary, nor is the #page wrapper. They are included for the sake of the example, which is a response to "What is the right way to structure HTML and CSS? " – DSKVR Jan 4 '11 at 17:52 While we are on the subject, here's an article on divitis: csscreator.com/divitis – DSKVR Jan 4 '11 at 18:43 Well I did what I'm good at, nicked your example and tweaked it, and for it's purpose, it's currently working as I want it to, no tables involved, apart from one detail which is just my problem to sort so, thanks for the answer and have some nice 50 points of mine.

:) – Mantar Jan 4 '117 at 14:37.

The standard way of building pages these days is using div tags although I'd need a lot more than 3. Tables tend not to be used for layouts: they add a large amount of weight to the page. How were you setting the widths of your floated elements?

Percentages would stay consistent as a window is resized whereas pixels will remain constant.

Well as I understand it divs are for 'areas' of the site, one per section, as such I went with tables. The widths are in the css. All but the tabs CSS is in there (Which is irrelevant) – Mantar Jan 1 '11 at 19:48 @Meke: divs are used for many things, not just for 'areas' of a site :) Have you given any thought to what James told you about widths?

You're using percentages, which means thing will change when you resize the browser – pwseo Jan 2 '11 at 2:40.

I didn't quite understand what you want. Is the line signaling the beginning of a new section supposed to cut through the "Small Sections" as well? Or are these Small Sections something like a sidebar, independent from the content on the left?

Odds are they will not be the same length every time. You should really split that into two different lines one for each area. I would structure like so: (Assuming the sections are not the same size) Link Link ... Tab Tab Lorem... Lorem... Lorem... Lorem... Make #main and #side float left with a width in %.

Do not add any margin or paddings to these or it will mess with the overall size do to the box model. If you want padding add another div inside it with the padding similar to how the #content is. EDIT: Changed so that the sections are the same size.

Link Link ... Tab Tab Lorem... Lorem... ...

Those sections will always be the same size. – Mantar Jan 4 '11 at 15:10 If they are the same size then shouldn't the tabs area go around the smaller right side one? – corymathews Jan 4 '11 at 15:13.

A good way to start is going throught the HTML5 Boilerplate which is, according to its creators a base HTML/CSS/JS template for a fast, robust and future-proof site Make sure to read the docs and also check out the video at the bottom of the page. Good luck!

– Mantar Jan 4 '11 at 13:54 It is also a collection of best practices in front-end development which can give you a good start. – creativityhurts Jan 4 '11 at 15:04 Well, I'm not looking for a WebDesign for Dummies right now, just an answer to my question. – Mantar Jan 4 '11 at 15:11 1 It's also extremely bloated.

– Damien Jan 4 '11 at 18:04.

I cant really gove you an answer,but what I can give you is a way to a solution, that is you have to find the anglde that you relate to or peaks your interest. A good paper is one that people get drawn into because it reaches them ln some way.As for me WW11 to me, I think of the holocaust and the effect it had on the survivors, their families and those who stood by and did nothing until it was too late.