Html div for layout

How to organize page layout with div’s

I have a question for the more experienced programmers here. How can I best organize the div’s to have like a left side, a middle side and a right side? I am doing my website now for a while and I spend half a day moving div’s around because they don’t stay in place after I put another one in and I want to work with the relative option. Also what I do is get them into position with big negative numbers. It just does not seem to be the right way to do things. I also get scrolbars when everything fits on the screen. Working in designmode in dreamweaver cs3 is not possible, because everything is tumbling all over each other. I am hoping for some input on how to do this better. thanks, Richard

It’s a bit unclear what you’re asking for. There’s no right way to do all CSS layouts, we need to know what exactly you’re trying to achieve to provide good advice.

7 Answers 7

In my opinion, here are some basic principles to keep in mind when structuring your site with CSS:

• Positioning: A common mistake that visual developers make when constructing their first pure CSS site layout is to use absolute/relative positioning properties. When placing your elements on a page, it is all about the box model and how margins, padding and widths interact with each other. There is no need to use the position property at all until you are further along. There are some exceptions to this rule, but we’ll keep it simple for now.
• Wrappers & containers: Having mentioned the box model above, leads me to my next point. You should be able to position all of your structural elements using the margin property correctly. Sometimes developers mix up padding/margin which results in «unexpected» behavior. Let’s say you want to create header, content, and sidebar elements. On top of that, you want to add content in those elements without messing with the parent elements. You need to set a specific height for your header (px, % etc.), you’ll also need to set widths for your content and sidebar elements. When working with the content within these elements, I typically use another element which acts as a «container» for your content. Steer clear from redefining the size of the «container» element, because you would have already defined this in your parent element. This way, you are free to use margin, padding freely without affecting the size of the parent element. if that made any sense 😉
• Clear your floats: To position your content and sidebar, or other column type elements you are going to have to use the float property on one or more of your elements. An important thing to keep in mind when using float is that you should clear them after you’ve finished a «float set». Meaning, if you have 3 columns, all with the float:left properties set, you should clear them after the set and NOT after each column. It depends on the layout but typically this way you’ll control over floats and you won’t run the risk of unexpectedly floating other elements that don’t need it.
• When in doubt, reset your margin/padding: Differences in browsers are frustrating to say the least. You can help combat this by destroying browser default properties if they are not defined. I always find that if reset the margin/padding to 0 for a questionable element, I can easily correct spacing issues.
• Use the cascade, don’t re-define: Remember that if you’ve already defined a bunch of css properties, and you are working within a child element, you don’t need to redefine properties. Children inherit their parents properties so only define differences.

This will continue to make sense the more you work with it, but I hope this will provide you with some points to keep in mind when structuring a CSS layout. There are some links above that are great resources as well, but I thought I should share some of things I personally think of while working in CSS.

Источник

CSS Website Layout

A website is often divided into headers, menus, content and a footer:

There are tons of different layout designs to choose from. However, the structure above, is one of the most common, and we will take a closer look at it in this tutorial.

Header

A header is usually located at the top of the website (or right below a top navigation menu). It often contains a logo or the website name:

Example

Header

Navigation Bar

A navigation bar contains a list of links to help visitors navigating through your website:

Example

/* The navbar container */
.topnav overflow: hidden;
background-color: #333;
>

/* Navbar links */
.topnav a float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
>

/* Links — change color on hover */
.topnav a:hover background-color: #ddd;
color: black;
>

Content

The layout in this section, often depends on the target users. The most common layout is one (or combining them) of the following:

• 1-column (often used for mobile browsers)
• 2-column (often used for tablets and laptops)
• 3-column layout (only used for desktops)

We will create a 3-column layout, and change it to a 1-column layout on smaller screens:

Example

/* Create three equal columns that float next to each other */
.column float: left;
width: 33.33%;
>

/* Clear floats after the columns */
.row:after content: «»;
display: table;
clear: both;
>

/* Responsive layout — makes the three columns stack on top of each other instead of next to each other on smaller screens (600px wide or less) */
@media screen and (max-width: 600px) .column width: 100%;
>
>

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Column

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique.

Tip: To create a 2-column layout, change the width to 50%. To create a 4-column layout, use 25%, etc.

Tip: Do you wonder how the @media rule works? Read more about it in our CSS Media Queries chapter.

Tip: A more modern way of creating column layouts, is to use CSS Flexbox. However, it is not supported in Internet Explorer 10 and earlier versions. If you require IE6-10 support, use floats (as shown above).

To learn more about the Flexible Box Layout Module, read our CSS Flexbox chapter.

Unequal Columns

The main content is the biggest and the most important part of your site.

It is common with unequal column widths, so that most of the space is reserved for the main content. The side content (if any) is often used as an alternative navigation or to specify information relevant to the main content. Change the widths as you like, only remember that it should add up to 100% in total:

Example

/* Left and right column */
.column.side width: 25%;
>

/* Middle column */
.column.middle width: 50%;
>

/* Responsive layout — makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) .column.side, .column.middle width: 100%;
>
>

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Main Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sit amet pretium urna. Vivamus venenatis velit nec neque ultricies, eget elementum magna tristique. Quisque vehicula, risus eget aliquam placerat, purus leo tincidunt eros, eget luctus quam orci in velit. Praesent scelerisque tortor sed accumsan convallis.

Side

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Footer

The footer is placed at the bottom of your page. It often contains information like copyright and contact info:

Example

Responsive Website Layout

By using some of the CSS code above, we have created a responsive website layout, which varies between two columns and full-width columns depending on screen width:

Ever heard about W3Schools Spaces? Here you can create your website from scratch or use a template, and host it for free.

Источник

HTML Layout

In this tutorial you will learn about the different methods of creating a web page layout.

Creating Website Layouts

Creating a website layout is the activity of positioning the various elements that make a web page in a well-structured manner and give appealing look to the website.

You have seen most websites on the internet usually display their content in multiple rows and columns, formatted like a magazine or newspaper to provide the users a better reading and writing environment. This can be easily achieved by using the HTML tags, such as , , , , , etc. and adding some CSS styles to them.

HTML Table Based Layout

Table provides the simplest way for creating layouts in HTML. Generally, this involves the process of putting the contents such as text, images, and so on into rows and columns.

The following layout is created using an HTML table with 3 rows and 2 columns — the first and last row spans both columns using the table’s colspan attribute:

Example

— The HTML code above will produce the following output:

Warning: The method used for creating layout in the above example is not wrong, but it’s not recommended. Avoid tables and inline styles for creating layouts. Layouts created using tables often rendered very slowly. Tables should only be used to display tabular data.

HTML Div Based Layout

The following example uses the div elements to create a multiple column layout. It will produce the same result as in the previous example that uses table element:

Example

— The HTML code above will produce the same output as the previous example:

We’ve created this layout using the CSS float techniques, since most web browsers support it. Alternatively, you can also use the CSS3 flexbox to create modern and more flexible layouts. See the tutorial on CSS3 flexible box layouts to learn about flexbox in detail.

Tip: Better web page layouts can be created by using the DIV elements and CSS. You can change the layout of all the pages of your website by editing just one CSS file. To learn about CSS in detail, please check out our CSS tutorial section.

Using the HTML5 Structural Elements

You can consider these elements as a replacement for commonly used classes such as .header , .footer , .nav , .section , etc. The following example uses the new HTML5 structural elements to create the same layout that we have created in the previous examples.

Example

— The HTML code above will also produce the same output as the previous example:

The following table provides a brief overview of new HTML5 structural elements.

Tag	Description
	Represents the header of a document or a section.
	Represents the footer of a document or a section.
	Represents a section of navigation links.
	Represents a section of a document, such as header, footer etc.
	Represents an article, blog post, or other self-contained unit of information.
	Represents some content loosely related to the page content.

Please check out the reference on HTML5 tags to know about the newly introduced tags.

Источник