WeLoveCSS Logo
Home Profile Members Search Rules Help New Posts



WeLoveCSS > WEB DESIGN > CSS > [SOLVED] 3 divs floated left, not respecting fixed width

Reply
  Thread Tools Display Modes
Old 10th June 13, 12:38 PM   #1
laraortiz
WLC Member
 
Join Date: Jun 2013
Posts: 2
Default 3 divs floated left, not respecting fixed width

Hi,
I'm trying to get 3 divs (.1col) of equal width to float next to one another. They are inside a container that is 720px wide, and each div is set to 228px wide, plus 1 px border and 10px right margin. The container (#content) has 0 margin, 0 border and 0 padding.

No matter what I have tried, the class="1col" divs will not respect the width I have set. If they have no content inside them, they shrink, and if they have content, they expand as wide as the content.

Possibly relevant styles:

* {
margin: 0;
border: 0;
padding: 0
}
p {
font-family: Arial, Helvetica, sans-serif;
color: #000;
font-size: 12px;
line-height: 16px;
margin-bottom: 16px;
}
#content {
width: 720px;
margin: 0;
padding: 0;
border:0;
}
.1col {
width: 228px;
margin: 0 10px 10px 0;
}
.2col {
width: 468px;
margin: 0 10px 10px 0;
}
.3col {
width: 708px;
margin: 0 10px 10px 0;
}
.greybox {
background-color: #F6F6F6;
border: 1px solid #DAD8D8;
}
.bluebox {
background-color: #F6F6F6;
border: 1px solid #DAD8D8;
}
.left {
float: left;
}
.right {
float: right;
}
.innerpadding {
padding: 10px;
width:auto;
}
.clear {
clear: both;
}


HTML:

<div id="content">
<div class="3col">
<h1>Lorem ipsum</h1>
<p><a href=" ">Lorem ipsum</a></p>
<p>Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.</p>
<h2>This is an h2.</h2>
<h3>This is the h3 style.</h3>
</div>
<div class="greybox left 1col">
<div class="innerpadding">This is a test of the emergency broad
</div>
</div>
<div class="greybox left 1col">
<div class="innerpadding">This is a test of the emergency broad
</div>
</div>
<div class="greybox left 1col">
<div class="innerpadding">This is a test of the emergency broad
</div>
</div><div class="clear"></div></div>
laraortiz is offline   Reply With Quote
Old 10th June 13, 11:51 PM   #2
meesa
WLC Mod
 
meesa's Avatar
 
Join Date: Jul 2009
Location: Milky Way Galaxy
Posts: 3,716
Default Re: 3 divs floated left, not respecting fixed width

Quote:
Originally Posted by W3 Schools
Do NOT start an ID name with a number!
Does that help?
__________________
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 10th June 13, 11:57 PM   #3
laraortiz
WLC Member
 
Join Date: Jun 2013
Posts: 2
Default Re: 3 divs floated left, not respecting fixed width

Yep. That fixed it. After all the Googling and forum searching I have done, I never dreamed that was the answer. It pays to know the basic rules. Thanks a bunch.
laraortiz 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 03:36 AM.



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 - 2018, Jelsoft Enterprises Ltd.