Float
in [CSS]
|
From: shapper on 4 May 2010 21:07 Hello, I have the following markup: <div class="Center"> <img class="Thumbnail" src="/center/getthumbnail/1" alt=""/> <div class="Info"> <span>Name</span> <div class="Contact"> St. Something, 4000, New York<br/> 112794334334<br/> <a href="mailto:email(a)gxyz.com">email(a)gxyz.com</ a> </div> </div> <div class="Extra"> <img class="Photograph" src="/center/getphotograph/1" alt="Centro em Lisboa"/> <p>Some text</p> </div> </div> I am trying to have the Thumbnail IMAGE on left, the Info DIV on right and the Extra DIV on the bottom -- Thumbnail -- Info -- --------- Extra ----------- I tried to float left both Thumbnail IMAGE and Info DIV. And clear:both in div Extra. However the float does not clear. I am able to make this work by adding some empty divs with "clear:both" but I would like to make this right. What am I doing wrong? Thanks, Miguel
From: rf on 4 May 2010 21:20 "shapper" <mdmoura(a)gmail.com> wrote in message news:10304ebe-782b-45af-9833-ea7561dfdc8b(a)k41g2000yqb.googlegroups.com... > Hello, > > I have the following markup: URL? This is required so that rather than mentally visuilising the page from a snippit of HTML I can look at the page in Firefox and use the developer tools to turn on borders for all elements. That way it will become obvious what is going exactly where and I will be able to instantly spot the trouble, and amend the CSS (which you have not supplied) directly using Firebug to instantly confirm the diagnosis. Or perhaps you could do all of this for me :-) It could be something as simple as a missing ; in your CSS (which you have not supplied) but I can't tell without a crystal ball.
From: dorayme on 5 May 2010 00:27 In article <10304ebe-782b-45af-9833-ea7561dfdc8b(a)k41g2000yqb.googlegroups.co m>, shapper <mdmoura(a)gmail.com> wrote: > Hello, > > I have the following markup: > > <div class="Center"> > > <img class="Thumbnail" src="/center/getthumbnail/1" alt=""/> > > <div class="Info"> > <span>Name</span> > <div class="Contact"> > St. Something, 4000, New York<br/> > 112794334334<br/> > <a href="mailto:email(a)gxyz.com">email(a)gxyz.com</ > a> > </div> > </div> > > <div class="Extra"> > <img class="Photograph" src="/center/getphotograph/1" > alt="Centro em Lisboa"/> > <p>Some text</p> > </div> > > </div> > > I am trying to have the Thumbnail IMAGE on left, the Info DIV on right > and the Extra DIV on the bottom > > -- Thumbnail -- Info -- > --------- Extra ----------- > > I tried to float left both Thumbnail IMAGE and Info DIV. > And clear:both in div Extra. > > However the float does not clear. .... Why not 1. Style the div of class "Center", with overflow:hidden; 2. Style the first img with float:left; 3. Style the div of class "Info", with margin-left: ...px (whatever the width of the image and throw in a few extra pixels to give a bit of grace between the thumb and the text) 4. Style the div of class "Extra", with clear:left; and see if Bob gets to be your uncle? -- dorayme
From: shapper on 6 May 2010 07:07 On May 5, 5:27 am, dorayme <dora...(a)optusnet.com.au> wrote: > In article > <10304ebe-782b-45af-9833-ea7561dfd...(a)k41g2000yqb.googlegroups.co > m>, > > > > shapper <mdmo...(a)gmail.com> wrote: > > Hello, > > > I have the following markup: > > > <div class="Center"> > > > <img class="Thumbnail" src="/center/getthumbnail/1" alt=""/> > > > <div class="Info"> > > <span>Name</span> > > <div class="Contact"> > > St. Something, 4000, New York<br/> > > 112794334334<br/> > > <a href="mailto:em...(a)gxyz.com">em...(a)gxyz..com</ > > a> > > </div> > > </div> > > > <div class="Extra"> > > <img class="Photograph" src="/center/getphotograph/1" > > alt="Centro em Lisboa"/> > > <p>Some text</p> > > </div> > > > </div> > > > I am trying to have the Thumbnail IMAGE on left, the Info DIV on right > > and the Extra DIV on the bottom > > > -- Thumbnail -- Info -- > > --------- Extra ----------- > > > I tried to float left both Thumbnail IMAGE and Info DIV. > > And clear:both in div Extra. > > > However the float does not clear. > > ... > > Why not > > 1. Style the div of class "Center", with overflow:hidden; > > 2. Style the first img with float:left; > > 3. Style the div of class "Info", with margin-left: ...px > (whatever the width of the image and throw in a few extra pixels > to give a bit of grace between the thumb and the text) > > 4. Style the div of class "Extra", with clear:left; > > and see if Bob gets to be your uncle? > > -- > dorayme Thank you dorayme.
|
Pages: 1 Prev: Is there a way to detect "unused" CSS entries? Next: cellpadding="0" cellspacing="0" in CSS |