Sorting Columns Design View Issue !

[novakin]

Hi

i created a 3 columns one after another and they look very good when i preview the page, the thing is im using Dreamweaver CS4 and in design view the columns are shown one under another but in the original order like in real time ! Ive tried changing the HTML divs order by adding the 2 columns in to the 1st one, div into div ! and everything looks better but now i got scaling, the first one is in perfect position the second one is in the same position but 3 or 4 pixels down and the third one is 3 or 4 pixels down from the 2nd one !
i dont know what else i can do !

[4css]

Maybe you can post some of your code to be reviewed?

It might be helpful to see what you are doing code wise. Also have you validated? Double checked for typo's?

[novakin]

<div id="columnBoxBar">
<div class="columnArrow"><img src="img/arrow.png" width="19" height="19" alt="Arrow" /></div>
<div class="columnBarTxt">Latest Stuff</div>

<!-- Column 1 -->
<div id="column1">
<div class="columnImg1"><img src="columnImg/NY.gif" width="179" height="93" alt="New York" /></div>
<div class="columnDesc1">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</div>
<div class="underColumn1">Date: 25.03.2009<br />
From: Novakin<br />
<span class="columnReadM"><a href="#">Read More...</a></span></div>
</div>
<!-- Column 1 Ends Here -->

<!-- Column 2 -->
<div id="column2">
<div class="columnImg2"><img src="columnImg/Alien.gif" width="179" height="93" alt="Alien" /></div>
<div class="columnDesc2">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard </div>
<div class="underColumn2">Date: 25.03.2009<br />
From: Novakin<br />
<span class="columnReadM"><a href="#">Read More...</a></span></div>
</div>
<!-- Column 2 Ends Here -->

<!-- Column 3 -->
<div id="column3">
<div class="columnImg3"><img src="columnImg/GoldMan.gif" width="179" height="93" alt="Gold Man" /></div>
<div class="columnDesc3">is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard</div>
<div class="underColumn3">Date: 25.03.2009<br />
From: Novakin<br />
<span class="columnReadM"><a href="#">Read More...</a></span></div>
</div>
<!-- Columnd 3 Ends Here -->
</div>

/* here's my CSS for the code above */

#columnBoxBar {
float:left;
width:610px;
height:25px;
margin:15px 0px 0px 1px;
background:url(../img/ColumnBarBack.gif) repeat-x;
}

.columnArrow {
width:19px;
height:21px;
margin:2px 0px 0px 7px;
padding:0px 0px 0px 0px;
}

.columnBarTxt {
width:100px;
height:21px;
margin:-21px 0px 0px 30px;
padding:3px 0px 0px 0px;
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#FFF;
}

#column1 {
width:194px;
height:168px;
margin:9px 0px 0px 1px;
border:#000 thin solid;
}

.columnImg1 {
width:179px;
height:93px;
margin:7px 0px 0px 6px;
border:#000 thin solid;
}

.columnDesc1 {
width:179px;
height:57px;
margin:0px 0px 0px 7px;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#000;
}

.underColumn1 {
width:194px;
height:43px;
margin:17px 0px 0px -1px;
border:#7e8791 thin solid;
background:url(../img/UnderColumnBack.gif) repeat-x;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#006;
}

.columnReadM {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#F00;
}

.columnReadM a {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#F00;
}

.columnReadM a:hover {
color:#09F;
}

#column2 {
float:left;
width:194px;
height:168px;
margin:-170px 0px 0px 207px;
border:#000 thin solid;
}

.columnImg2 {
width:179px;
height:93px;
margin:7px 0px 0px 6px;
border:#000 thin solid;
}

.columnDesc2 {
width:179px;
height:57px;
margin:0px 0px 0px 7px;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#000;
}

.underColumn2 {
width:194px;
height:43px;
margin:17px 0px 0px -1px;
border:#7e8791 thin solid;
background:url(../img/UnderColumnBack.gif) repeat-x;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#006;
}

.columnReadM {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#F00;
}

.columnReadM a {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#F00;
}

.columnReadM a:hover {
color:#09F;
}

#column3 {
float:left;
width:194px;
height:168px;
margin:-170px 0px 0px 413px;
border:#000 thin solid;
}

.columnImg3 {
width:179px;
height:93px;
margin:7px 0px 0px 6px;
border:#000 thin solid;
}

.columnDesc3 {
width:179px;
height:57px;
margin:0px 0px 0px 7px;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#000;
}

.underColumn3 {
width:194px;
height:43px;
margin:17px 0px 0px -1px;
border:#7e8791 thin solid;
background:url(../img/UnderColumnBack.gif) repeat-x;
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#006;
}

.columnReadM {
font-family:Verdana, Geneva, sans-serif;
font-size:11px;
color:#F00;
}

.columnReadM a {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
color:#F00;
}

.columnReadM a:hover {
color:#09F;
}

[4css]

Hi novakin

I tested your code in Firefox 3 and it seems to be fine to me.

In IE7 is where the problem is arising.

I have to run out, but I will look at this again for you.

[novakin]

Thanks for the reply, i retest my code and it works fine, and for the IE7 issue i made one more style adjusted just for IE browsers and now everything is fine. I really appreciate your help so if i can help you anyhow just tell me :D