Floated Image to Left of a Ul Is Ignoring Margin/Padding

CSS margins: aligning a list against a float-left image

Update your css with a left padding on ".comment-contents li" and a remove the margin on ".head"

.comment-contents li {
list-style-type: none;
margin-bottom: 10px;
padding-left: 60px;
}

.head {
margin-left:0px;
}

While you are at it, just use padding instead of margin for ".comment-contents li":

.comment-contents li {
list-style-type: none;
padding: 0 0 10px 60px;
}

I recommend not using padding and margin on a class unless absolutly necessary.

Why do my list item bullets overlap floating elements

I have found a solution to this problem. Applying an ul { overflow: hidden; } to the ul ensures that the box itself is pushed aside by the float, instead of the contents of the box.

Only IE6 needs an ul { zoom: 1; } in our conditional comments to make sure the ul has layout.

Floated Image won't float to the proper space. What am I doing wrong?

The problem is you're specifying a fixed width for the parent .benefitsList element so the image has no space to actually float to the left of the child list. So I removed the width on .benefitsList, floated .inLine left and it works.

Here's the CSS

<style>

.landingWrapper{
font-family: Arial, sans-serif;
font-size: 14;
width: 784px;
display: block;
}

.blockIt {
display: block;
}

.clearIt {
clear: both;
min-height: 50px;
}
.margins {
margin-left: 35px;
margin-right: 35px;
}

.introText {
margin-bottom: 50px;
}

#listHeading {
background: #eceeef;
margin: 6px 13px;
}

#camera {
width: 354px;
height: 380px;
}

.inLine {
display: inline-block;
float:left;
}

#camera, .listWrap {
display: inline-block;
}

.listWrap {
margin-left: 1px;
}

.benefitsList {
float: left;
margin-top: 0;
}

.cameraDiv {
width: 354px;
float: left;
margin-top: 3px;
display: inline-block;
}

.heading {
margin-left: 25px;
width: 400px;
height: 40px;
background: #eceeef;
vertical-align: middle;
}

.heading #listHeading{
margin-top: 4px;
padding-top: 12px;
background: #eceeef;
font-size: 16px;
font-weight: bold;
vertical-align: middle;
}

.ulBenefits {
padding-left: 20px;
}

.ulBenefits li{
margin-bottom: 7px;
border-bottom: 1px solid #eceeef;
font-size: 12px;
font-family: Arial, sans-serif;
list-style-type: disc;
padding: 0;
}

.ulBenefits li p{
margin: 5px 0;
padding: 0;
}

#headingTwo {
margin-top: 30px;
}

#secondaryText {
margin-bottom: 25px;
width: 714px;
}

.diagrams{
margin-bottom: 15px;
min-height: 50px;
width: 713px;
height: 195px;
}

.infoBox{
border: 1px solid #eceeef;
border-top: 10px solid #eceeef;
width: 211px;
display: block;
margin-left: 35px;
margin-top: 15px;
float: left;
}

.infoBox p {
margin-left: 6px;
margin-right: 6px;
}

#walkieTalkieOne {
width: 209px;
height: 186;
}

#walkieTalkieTwo {
width: 210px;
height: 186;
}
#walkieTalkieThree {
width: 211px;
height: 186;
}

.infoHeader {
font-weight: bold;
font-size: 20px;
margin-bottom: 0;
}

.infoDesc{
margin-bottom: 15px;
margin-top: 5px;
}

.closer {
display: block;
margin-top: 50px;
clear: both;
position: relative;
top: 25px;
}

#resellerButton {
margin-bottom: 50px;
clear: both;
position: relative;
top: 25px;
}

#resellButtLink{
text-decoration: none;
clear: both;
position: relative;
top: 25px;
}
</style>

You can see it here

Trying to get rid of whitespace to left of ul element

Just add padding-left: 0; to the #files ul.

#files ul {
list-style-type: none;
float: left;
padding-left: 0;
}

ul with background image and left floated li items

Add clearfix pseudo element to the ul

ul:after {
content: "";
clear: both;
display: table;
}


Related Topics



Leave a reply



Submit