WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > CSS not behaving properly

Reply
  Thread Tools Display Modes
Old 21st August 11, 01:24 PM   #11
bgareth
WLC Member
 
bgareth's Avatar
 
Join Date: Jul 2010
Posts: 40
Default Re: CSS not behaving properly

Hello Chris,

Yes! That is pretty much it, I see that each block has an equal width! I am a bit confused as I went to view page source and looked at the stylesheets but I couldn't find the CSS for the blocks! Not sure where I am going wrong :-)
__________________
Kind Regards,

Ben
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
bgareth is offline   Reply With Quote
Old 21st August 11, 02:33 PM   #12
bgareth
WLC Member
 
bgareth's Avatar
 
Join Date: Jul 2010
Posts: 40
Default Re: CSS not behaving properly

i've been having a go at putting the divs into container boxes but it isn't working. Anybody have any ideas or can explain why it isn't working?

Thanks!

http://www.garethgroup.com/test/floatcolumnsattempt/
__________________
Kind Regards,

Ben
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
bgareth is offline   Reply With Quote
Old 21st August 11, 03:18 PM   #13
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: CSS not behaving properly

#columnleftcontianer should have the width on it. #columnleft shouldn't. You got which one to put the styles on mixed up.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 21st August 11, 03:47 PM   #14
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: CSS not behaving properly

http://www.modtalk.co.uk/_site/code/...ts/four-column.
http://www.modtalk.co.uk/_site/code/...lumn/style.css.

Ignore the #main rules they are simply there to override the global rules.

And BTW Ignore the comment on the page, that was me teaching my 15 year old step-son the basics of HTML coding.

The relevant
HTML Code:
<div id="inner">
<div id="col-a">A </div>
<div id="col-b">B</div>
<div id="col-c">C</div>
<div id="col-d">D</div>

</div> <!-- id=inner -->
Code:
#inner {
	width:100%;
	height:100%;
	background-color: purple;
}
#inner div {
	width: 23%;
	margin: 0 auto;
	padding: 1%;
	height: 95%;
	float:left;
}
#col-a {
	background-color: blue;
}
#col-b {
	background-color: orange;
}
#col-c {
	background-color: teal;
}
#col-d {
	background-color: purple;
}
The background colour on #inner needs to be the same as the background colour of #col-d to mask the couple of pixels space that some browsers will need (no names mentioned to protect the guilty) to stop the "float drop"

Last edited by meesa; 21st August 11 at 04:09 PM. Reason: Fixed links
chrishirst is offline   Reply With Quote
Old 21st August 11, 06:34 PM   #15
bgareth
WLC Member
 
bgareth's Avatar
 
Join Date: Jul 2010
Posts: 40
Default Re: CSS not behaving properly

Thanks, i'm trying to get the four columns to take up 25% of the width each..
__________________
Kind Regards,

Ben
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
bgareth is offline   Reply With Quote
Old 21st August 11, 06:51 PM   #16
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: CSS not behaving properly

you can't. It will FAIL in EVERY version of IE AND if you add paddings or margins it will also "break".

And who will know any different?? You were not aware that my solution was not set at 25% each until you were told.

This is the world of HTML & CSS. EXACT only exists as a concept.
chrishirst is offline   Reply With Quote
Old 22nd August 11, 01:33 AM   #17
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,711
Default Re: CSS not behaving properly

Then set each of your parent (#columnleftcontainer, etc) DIVs to 25%, and float them left. If it doesn't work, remove all margin and padding from the body.

Chris, it will work if he uses the parent DIV for the width, and the child DIV for the padding. But I do very much agree with your final statement.
__________________
Praise be to the Lord God for the ability to learn, the capability to analyze, and the time to help users on this forum.
meesa is offline   Reply With Quote
Old 22nd August 11, 10:28 AM   #18
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: CSS not behaving properly

Quote:
Chris, it will work if he uses the parent DIV for the width, and the child DIV for the padding.
Yeah, but that's a fair chunk of extra markup for no really good reason.
Instead of that you may as well step back ten years and use a four column borderless table.

@bgareth, I get the impression that you are thinking the HTML/CSS "box" to behave like a real, physical box does or that you can use the DOM as you would a sheet of paper.

If you take a look at the W3c box model and you can see that the height and width refers to the content area NOT the outer extremities, which are the margin edges.
This is why my layout has a 23% width plus 1% padding on the left and right content edges which then gives a 25% overall width. If margins or borders were required you would have to deduce the content area width by amounts EQUAL to the margins and borders to keep the element at 25% overall to prevent the "float drop" behaviour where 100% width is exceeded and the last element in the float plane is pushed down to the next horizontal row.

The one or two pixel "gap" that appears at the right of the floats acts as a bit of "breathing space" for the difference in rendering engines when they convert percentage widths to pixels for display on screen.

Allowing this space is something you learn to do after fifteen years of working with HTML and various browsers, including the notorious Netscape 4.7, after that the IE6 bugs were a breeze.

I don't even think about why I do it anymore, it's simply second nature when working out the sizes in my head.
chrishirst is offline   Reply With Quote
Old 24th August 11, 12:57 PM   #19
bgareth
WLC Member
 
bgareth's Avatar
 
Join Date: Jul 2010
Posts: 40
Default Re: CSS not behaving properly

Thanks for this - So to cut a long story short I need to take into account the padding within the overall size of the width? There is still however a div that isn't working and I'm not sure why
__________________
Kind Regards,

Ben
To view links or images in signatures your post count must be 5 or greater. You currently have 0 posts.
bgareth is offline   Reply With Quote
Old 24th August 11, 09:06 PM   #20
chrishirst
Banned
 
Join Date: Jun 2006
Location: Blackp ool U.K.
Posts: 3,194
Default Re: CSS not behaving properly

Quote:
I need to take into account the padding within the overall size of the width?
Yes.


Plus borders and margins
chrishirst is offline   Reply With Quote
Reply


Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 01:46 PM.



Home | Advertise | Contact Us | Top
Home | Advertise | Contact Us | Top

Copyrightę 2006 WeLoveCSS.com. All Rights Reserved.
Powered by vBulletin Version 3.8.4 Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.