simple (or stupid?) html/css question concerning DIV's ...

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
zick
Forum Commoner
Posts: 33
Joined: Thu Aug 14, 2003 3:18 pm

simple (or stupid?) html/css question concerning DIV's ...

Post by zick »

Let me start by saying that i've always been a table kinda guy, then i started using div's ... much cooler, but they don't always behave the way i would like. this might be my perception of the "rules" ...

ok, my problem deals with div's that have the style element "float" ...

if i were to write something like this:

Code: Select all

<div style="border:1px solid #333333"><!-- full wrapper -->
 <div style="float:left; width:33%"><!-- leftmost cell --><img src="#"></div>
 <div><!-- rightmost cell -->
  <div>line one</div>
  <div>line two</div>
 </div>
</div>
i would think that i would get a box around everything ... an image floating to the left, and to the right another box with two entries in it ...
but i get (in both ie 5.5, mozilla) a box that is only as high as the two entries and the image is sorta floating where it should be, but the "wrapper" doesn't wrap around it, even though it's "contained" in the wrapper.

am i missing something here ... i see other sites pull it off but for some reason i can't get it to go.

can someone please enlighten me?

thanx
dartcol
Forum Newbie
Posts: 4
Joined: Sun Apr 11, 2004 4:31 am

Post by dartcol »

Try this:

Code: Select all

<div style="float:left; width:33%"><!-- leftmost cell --><img src="#"></div>
<div style="border:1px solid #333333; text-align: right;"><!-- rightmost cell -->
  <div>line one</div>
  <div>line two</div>
</div>
I don't know if you would normally do this but why not use id attributes with the div element pointing to a .css file. HTH.
zick
Forum Commoner
Posts: 33
Joined: Thu Aug 14, 2003 3:18 pm

Post by zick »

yeah, i normally use those ... i just wrote it that way for speed's sake. i didn't want to write that whole thing out.

btw, i'm not thinking what you wrote will work. i'll try it, though. the "text-align" style attribute (which seems to be the only thing added) handles how text lines up, not how div's behave. everything lines up the way i want it to except the "wrapper", it only seems to wrap around the rightmost cell, and the div with the image is in it's place but the wrapper will intersect it halfway. i'm not sure why the wrapper behave's the way that it does ... is there a way to fix it?
dartcol
Forum Newbie
Posts: 4
Joined: Sun Apr 11, 2004 4:31 am

Post by dartcol »

Could you put up a screenshot of what you want to happen and what it looks likeat the moment? I'm having trouble getting my head round what it is you want to do.
phait
Forum Commoner
Posts: 46
Joined: Wed Apr 07, 2004 4:41 am
Location: watford / leicester, UK

Post by phait »

hi,
For what I think you want to do there are two possible ways:

Code: Select all

<div style="border: 1px solid #000;">
  <div style="float: left; width: 25%; margin-right: 10px; border: 1px solid #000;"><img src="yourimage.jpg" ...   />
  </div>
  
   <p>line one or whatever here</p>
   <p> another para of text here</p>

</div>
This will have the effect of placing the image over to the left and the text wrapping around it, so if the paragraphs were long enough then it would eventually wrap underneath the image.

If you want more formal columns with the image on the left and text on the right I suggest this which I got off of 'A list apart' (http://www.alistapart.com) a long time ago, but works for me.

Code: Select all

<div style="border: 1px solid #000;">

  <div style="float: left; width: 25%; border: 1px solid #000; margin-right: 2%"><img src="yourimage.jpg" ...  /></div>

  <div style="float: right; width: 60%; border: 1px solid #000; text-align: left;">text and other shiznitt goes here</div>

  <!-- spacer div -->
  <div style="clear: both; font-size: xx-small">non-breaking space goes in here (ampersand)amp;</div>

</div>
Basically the last internal div forces the left and right to sit next to each other, the only way the right hand one gets knocked down is if the box widths for both left and right floated divs exceed 100% width of the page, so that is the main thing to watch out for on this. Test it and play around with the padding / margins until you get the desired result. You can place the spacer div either above or below the two content divs to get the same effect.

let me know if it gives probs.

hth
zick
Forum Commoner
Posts: 33
Joined: Thu Aug 14, 2003 3:18 pm

Post by zick »

i'll give that a try ... thanks.

if that doesn't work, i'll have to put up some screenshots.
Post Reply