Graphic Design shadow to enhance presentation of images.
Graphic Design shadow to enhance presentation of images.

Web Design - Tips, Tricks and Programmng

DIV Floats that DO NOT ALIGN

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum

Previous Thread Return to Topic Next Thread
Author Message

17 Designs

17 Designs

Date Joined:
Jan 19, 2010

Posts:
66

Posted: Wed Sep 7, 2011 11:37 AM

Subject: DIV Floats that DO NOT ALIGN

As a web developer you may have experience a dilemma where the placements of columns of text do not line up. You have the correct pixel width however due to some mysterious CSS code superceding your well-defined column the placement of the columns do not appear as they should.

Mystery solved. Use the CSS display setting!

Next time you define a column add the setting "display". See the example below. Two newspaper columns are defined. One is 415 pixels wide and the other is 450 pixels wide. The display inline setting helps render the columns side-by-side.

div.newspaper-spread-left {
float: left;
width: 415px;
margin: 0 0 0 0;
padding: 10px 40px 20px 0;
display: inline;
}
div.newspaper-spread-right {
float: left;
width: 450px;
margin: 0 0 0 0;
padding: 10px 10px 20px 0;
display: inline;
}

Return to Forum Home Page

Forum

Return to Topic

Return to Topic

Login to Forum

Login to Forum

Register to access Forum

Register to access Forum