Jump to content

CSS column positioning


harryd

Recommended Posts

Hi all,

 

I am using two columns in my content area; 4 news boxes. How do you position them, so they are equal space between left and right column.

In dreamweaver I can use draw layout mode for tables. Any CSS tools, ideas, for positioning.

 

here is my css style

 

 

#content {

float: left;

width: 516px;

height: 730px;

padding: 10px;

margin: auto;

border: 1px solid #FFFFFF;

background-color:#FFFFFF;

}

.col1, .col2 {

float: left;

width: 230px;

height: 230px;

margin: 0px 15px 15px 0px;

}

 

.clear: { clear: both;

width: 100%; height: 0;

visibility: none;

 

}

 

Thanks :)

Link to comment
Share on other sites

please i could be wrong as i am new but i think i repeat i THINK where you have "float: left"

i think you can go say

 

float: left 5px;

float right 5px;

 

just try that and see if it works if not i can't help you im new too this all too mate but that seems to make sense to me..sorry i can't help you any further.

Link to comment
Share on other sites

You have a #content that is 516px wide, and both inner divs are 230 px wide with a margin on one side of 15px, totalling 490px so if both are float: left they will both be on the left side of #content. Make one float: right; and change the side margin to the other side and you will get a space in the middle.

 

#content {

float: left;

width: 516px;

height: 730px;

padding: 10px;

margin: auto;

border: 1px solid #FFFFFF;

background-color:#FFFFFF;

}

.col1 {

float: left;

width: 230px;

height: 230px;

padding: 0 0 15px 15px; /*15px padding on bottom and left*/

/*margin: 0px 0 15px 15px; 15px margin on bottom and left*/

}

.col2 {

float: right;

width: 230px;

height: 230px;

padding: 0 15px 15px 0px; /*15px padding on right and bottom*/

/*margin: 0px 15px 15px 0px; 15px margin on right and bottom*/

}

 

 

.clear: { clear: both;

width: 100%; height: 0;

visibility: none;

 

}

 

IE has a habit of doubling up side margins if on the same side as the float, so I changed the side margins to padding but you could try it as margin.

Edited by Wickham
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...