Box Model Web Page Layouts with CSS

Use CSS floats and positions to create web page layouts.

Category:

Education

Tags:

• css
• div
• float
• position
• web development
• cis
• 195
• 125dw
• 295

[snasebrase]

thanks.

btw, which firefox theme is that? ;)

[rrphillips]

firefox theme: nasa night launch

[SwitchRich]

There must have been a point in time when you didn't know it. You weren't born with this information in your head!

I found the tutorial very useful.

[GroovyDruid]

I've got a challenge. Try getting it to look the same in FF and IE without using a CSS hack. It's next to impossible.

[AdSenseSite]

10/5! i lerended so much!

[YinHoNg]

Is there a second part to this video?

[YinHoNg]

Hi. Great video tutorial. Programming is much easier to learn through visual demonstration.

4:55 - This problem can be solved much easier.

There is no need to declare BOTH the red and blue box to be width: 50%. Just declaring the red box to be width 50%, and then removing the margins off both will create the same effect.

[x3Roenie]

@0987654321284

div ofcourse

[leonheartdsl]

Seems like you made a mistake in this tut. You say absolute positioning works 'best" if any parent container has a position value. Either relative or absolute. What i`d like to point is, you NEED to have a parent container with either values. If not, those absolute positioned elements will position itself to the first element which has it. If the CSS doesn`t provide any, the body will be its parameter.

[0987654321284]

tables or div? what is better.

[solow1991]

you'll need a text align for IE7 < to center a div. but this is a nice video for those new to html and css. nice vid :)

[rrphillips]

Using a css reset rule will go a long way to creating consistent layouts for FF and IE. You can find complex reset rule examples through Eric Meyer's site, but I often use * {margin:0px;padding:0px} as the first rule in my css. That takes away the default margin and padding of all elements and puts IE and Firefox on the same starting line.

[SherzMappingTuts]

So true...

[Saotik]

I wish my Web Dev lecturer was as clear as you are. Thanks for the tutorials.