My CSS Columns keep wrapping
in [CSS]
|
Prev: extreme difficulty accessing and modifying css using dom2-style
Next: Shrink-to-fit width calculation: preferred width question
From: .Net Sports on 9 Jun 2010 16:58 I have a four column display in which the elements inside the columns (images) keep wrapping down to the next line, even tho my master table is set to 995pixels. Below is the css for the columns in question, and the html i have used on my webpage to call them up: <div id="column1"><img src="images/banner.jpg" border="0"><IFRAME SRC="leftpanel.aspx" name="banner" width="175" height="800" frameborder="no" border="0" MARGINWIDTH="0" MARGINHEIGHT="0" SCROLLING="no"></IFRAME> </div> <div id="column2"><img src=" images /banner.jpg" border="0"><!-- end column2 div--> </div> <div id="column3"><img src=" images /map.jpg" border="0"><!--end column3 div--> </div> <div id="column4"><img src=" images /banner.jpg" border="0"> <!-- end column4 div--> </div> Css: # column1 { position: relative; margin-top: 9px; float: left; /*column-width: 140px; */ width: auto; height: auto; } # column2 { position: relative; margin-top: 9px; float: left; /*column-width: 140px; */ width: auto; height: auto; } #column3 { position: relative; margin-top: 9px; float: left; /*column-width: 460px; */ width: auto; height: auto; } # column4 { position: relative; margin-top: 9px; float: left; /*column-width: 140px; */ width: auto; height: auto; } Css that works : #OK1 { position: relative; margin-top: 9px; margin-left: 12px; float: left; width: 230px; } #OK2 { position: relative; margin-top: 9px; margin-left: 6px; float: left; width: 504px; } #OK3 { position: relative; margin-top: 9px; margin-left: 3px; float: left; width: 155px; } ....i've even taken out the width and height values and replaced with "auto" as the parameters, it still keeps wrapping ??? thanks in advance NS
From: Marious Barrier on 9 Jun 2010 17:24 On 06/09/2010 04:58 PM, .Net Sports wrote: > I have a four column display in which the elements inside the columns > (images) keep wrapping down to the next line, even tho my master table > is set to 995pixels. Below is the css for the columns in question, and > the html i have used on my webpage to call them up: > > <div id="column1"><img src="images/banner.jpg" border="0"><IFRAME > SRC="leftpanel.aspx" name="banner" width="175" height="800" > frameborder="no" border="0" MARGINWIDTH="0" MARGINHEIGHT="0" > SCROLLING="no"></IFRAME> > </div> > <div id="column2"><img src=" images /banner.jpg" border="0"><!-- end > column2 div--> </div> > <div id="column3"><img src=" images /map.jpg" border="0"><!--end > column3 div--> </div> > <div id="column4"><img src=" images /banner.jpg" border="0"> <!-- end > column4 div--> </div> > > Css: > > # column1 { > position: relative; > margin-top: 9px; > float: left; > /*column-width: 140px; > */ > width: auto; > height: auto; > } > > > # column2 { > position: relative; > margin-top: 9px; > float: left; > /*column-width: 140px; > */ > width: auto; > height: auto; > } > > > #column3 { > position: relative; > margin-top: 9px; > float: left; > > /*column-width: 460px; > */ > width: auto; > height: auto; > } > > # column4 { > position: relative; > margin-top: 9px; > float: left; > /*column-width: 140px; > */ > width: auto; > height: auto; > } > > Css that works : > > #OK1 { > position: relative; > margin-top: 9px; > margin-left: 12px; > float: left; > width: 230px; > > } > > > #OK2 { > position: relative; > margin-top: 9px; > margin-left: 6px; > float: left; > width: 504px; > > } > > #OK3 { > position: relative; > margin-top: 9px; > margin-left: 3px; > float: left; > width: 155px; > > } > > ...i've even taken out the width and height values and replaced with > "auto" as the parameters, it still keeps wrapping > > ??? > thanks in advance > NS Post an online working example please if you want someone to help you.
From: dorayme on 9 Jun 2010 19:02
In article <hup0ea$qit$1(a)localhost.localdomain>, Marious Barrier <marious.barrier(a)gmail.com> wrote: > On 06/09/2010 04:58 PM, .Net Sports wrote: > > I have a four column display in which the elements inside the columns > > (images) keep wrapping down to the next line, even tho my master table > > is set to 995pixels. Below is the css for the columns in question, and > > the html i have used on my webpage to call them up: > > > > <div id="column1"><img src="images/banner.jpg" border="0"><IFRAME > > SRC="leftpanel.aspx" name="banner" width="175" height="800" > > frameborder="no" border="0" MARGINWIDTH="0" MARGINHEIGHT="0" > > SCROLLING="no"></IFRAME> > > </div> > > <div id="column2">... .... > > > > Css: > > > > # column1 { > > position: relative; > > margin-top: 9px; > > float: left; > > /*column-width: 140px; > > */ > > width: auto; > > height: auto; > > } > > > > > > # column2 { .... > > Post an online working example please if you want someone to help you. That might be pretty impossible in this case, like a badly broken car being unable to be driven to a garage for repair. <g> btw, no need to quote all the OP's post. At the very least OP should be taking out all gross mistakes in the quoted markup, at least simple things like no gap between the # and the name in IDs. And look at stuff like saying that a column is thought to be 140px wide when part of the content is specified to be 175px wide? -- dorayme |