Using Full Width DIVs with 980px Divs On Same Page

Forum Moderators: not2easy

Message Too Old, No Replies

Using Full Width DIVs with 980px Divs On Same Page

Planet13

5:39 pm on Nov 9, 2014 (gmt 0)

Good morning, Everyone:

Is there some "trick" or special attributes I need to study up on if I want to use full width DIVs along with DIVs with widths of only 960px, for example?

Say I want to do something like this:

DIV 1 (full width - background Hero photo)
--- DIV 1A (960px - with headline - appears above background photo)

DIV 2 (960px - some text content)

DIV 3 (full width - blue background)
-- DIV 3A (960px - more text copy - appears above the blue background)

DIV 4 (960px - some more text content)

~~~~~

Do I just leave off a max-width: style from the DIVs that will be full width?

(In my short experiments, that wasn't working out so well... might have been because I had an 8-year-old boy tugging on my arm begging me to play video games with him while I was trying to implement it.)

not2easy

5:44 pm on Nov 9, 2014 (gmt 0)

All it takes is to assign a class to the div and add the attributes to the element. For example:
div.wide {width: 100%;background: blue;}

On the page:
<div class="wide">content</div>

Planet13

5:58 pm on Nov 9, 2014 (gmt 0)

That's it?

So I could just do something like this (using inline styles here just to make it easier to read)

<div style="width: 100%;background: blue;">
<div style="max-width: 960px;">
I'm looking for pound notes, loose change, bad checks, anything; Gimme some money
</div>
</div>
<div style="max-width: 960px;">
And you my love, won't you take my hand? We'll go back in time to that mystic land, Where the dew drops cry and the cats meow
</div>
<div style="width: 100%;background: green;">
<div style="max-width: 960px;">
I got nothing left to say
</div>
</div>

lucy24

7:55 pm on Nov 9, 2014 (gmt 0)

:: detour to look up text ::

Haha.

A width expressed as a percentage always means relative to the parent. So a top-level {width: 100%} means the full width of the document-- or, more likely, the full width of the {body} assuming that's where you set your overall margins. But a {width: 100%} inside a {width: 960px} means stay at 960px.

By default, the width of most block-level elements including div is 100%. So on top-level elements you need not say anything, or just {width: auto} if you are anxious.

:: insert boilerplate about pros and cons of expressing any value other than <img> size explicitly in pixels ::

not2easy

8:40 pm on Nov 9, 2014 (gmt 0)

True, Lucy, I was just going by the example posted where the 960px was the child element and thought (probably without any reason to do so) that this must be inside of a container element that had a width limit applied. I will blame it on the mental image of the poor child being denied time at the challenge on a weekend.

Planet13

9:25 pm on Nov 9, 2014 (gmt 0)

Thank you, Lucy24, for the clarification for me.

So basically, just make sure that

1) the body element has a width of 100%

2) Any child DIVs that I want to be full width need to be in parent DIVs that are width: 100% as well (if they ARE inside a parent DIV)

Thanks in advance.

lucy24

9:59 pm on Nov 9, 2014 (gmt 0)

You really don't need to say anything about width at all, since 100% is the default for-- I think-- all block-level elements except tables. (Tables default to "auto" unless you explicitly tell them to go 100%.)

In fact your body element is probably not 100%, because it's going to have margins. Ever been to a site where the text ran right up into the edge of the window on both sides? It's unreadable, independent of viewport width. Even newspapers have margins. The present page has left and right margins* of 7.5%. Imagine how awful it would look if those margins weren't there. If you've got a header running clear across the page, the body might be 100% and then the entire remaining page content would be inside a div with, say, 10% margins.

* This is not technically true-- it's really a table set to 85% width inside <center> tags-- but work with me ;)

tangor

12:41 am on Nov 10, 2014 (gmt 0)

All above good. Just don't over-think things. KISS method

body (no width statement means All Available)
Div (no width statement means All available
Div width described is just that., and if body is less than 100% can override. Heck, you can negative margins left/right outside body (though why would you wish to do so, short of black hat stuff).

or...

Child inherits from Parent unless Child pitches hissy fit and wants to do it different. (Child overrides Parent, ie. the Black Sheep Div)

At least this is my experience.

Planet13

1:22 am on Nov 11, 2014 (gmt 0)

Child inherits from Parent unless Child pitches hissy fit and wants to do it different.

Or... child makes that "You don't love me anymore" face where the tear drop's start to well up...