Home › Forums › CSS › 3 left-floated divs are not sitting next to one another, not respecting fixed-width
- This topic is empty.
-
AuthorPosts
-
June 10, 2013 at 7:48 am #45422laraortizMember
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.
CodePen is here: http://codepen.io/laraortiz/pen/aimyE or see code below.
Thanks!
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:
Lorem ipsum
Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur. Lorem ipsum dolor sit amet consectetur.
This is an h2.
This is the h3 style.
This is a test of the emergency broadThis is a test of the emergency broadThis is a test of the emergency broadJune 10, 2013 at 7:57 am #138194Paulie_DMemberYou can’t start class names with a number.
Try .col-1 instead of .1col
June 10, 2013 at 9:18 am #138203rodolphebParticipantTo support Paulie_D’s comment:
[W3C recommendation](http://www.w3.org/TR/CSS21/syndata.html#characters “W3c specification”)”In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier “B&W?” may be written as “B&W?” or “B26 W3F”.
June 10, 2013 at 4:01 pm #138231laraortizMemberThanks so much. That solved it. I figured it might be some rule I didn’t know, because I’m pretty much teaching this to myself by inspecting CSS around the web. Much appreciated.
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.