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
Working with CSS Floats in HTML2Pdf
How to Make Tinymce's Modal Dialogs Responsive
How Do Browsers Parse/Render CSS
Django, Content Security Policy Directive
Vuejs: Complete Dynamic Component Transition Before Rendering New Component
Media Query About Screen Size Instead of Resolution
Efficient and Inefficient CSS Selectors (According to Google, Pagespeed ...)
Multilanguage Utf-8 Website with Arabic
How to Style Ng-Bootstrap - Alternative to /Deep/
@Font-Face Fonts Showing Blurred on MAC in Safari and Chrome
Concatenate Multiple CSS Files into One
Can a CSS Pseudo-Class Be Namespaced
Font Family Open Sans Not Being Used
Vertical-Align and Inline-Block Behaving Annoyingly Different in Chrome and Firefox