Hi all~ Need some help with CSS.

I'm trying to get two divs to reside side by side. Each div has a few lines of words and I need the two div blocks to be just next to each other if possible. I went through many methods and this is what I've come up with so far that works pretty well...

The trial page is here.



(I'm trying to customise Poster Child by the way...)

Problem is, this code doesn't work in IE 5.2 for Mac! It looks like IE:mac doesn't recognise the float command in CSS (which has existed since Netscape 4.0, for goodness sakes, but apparently IE:mac is ridiculously buggy and has been horribly ported to OS X, so it doesn't even recognise something as simple as float) and thus the div blocks end up one after the other, placed vertically.

I'm literally pulling my hair out over this, I need the information to be in two div blocks because the elements have to centralised within their own div block but it would be really good if I could get them to be side by side.

Does anyone know how to do this with CSS without having to resort to position: relative or absolute? I'm not sure whether position: relative or absolute would work because I'm nesting this bunch of div blocks within another div tag. Using another div to "contain" the two div tags doesn't work in IE:mac too, plus it's really buggy, once the browser window size changes, it will switch back to being one above the other.

For now I'm resigned to having it work on Safari and not have it work on IE:mac. Problem is I'm also scared it won't work on Windows browsers (spent too much time on IE:mac haven't tested it with other browsers yet), so if the above code doesn't work in your browser, tell me please...

 

 

 

Reply

Hey,
That's how I'd created my NOTE tag, by nesting 5 other divs inside a main container div. The header div has 3 of these divs nested inside it, and placed side-by-side using the float attribute. However, I used float: left, right & center to place them. Take a look at this tutorial: http://www.astahost.com/howto-3-custom-bbc...note-t4009.html
It might just help you.

However, for some strange reason, I'd to draw the right-most floated div first and then the left & center. Or else these div's would turn up at random places. Even I'm struggling with CSS so I couldn't come up with a valid explanation as to why it was working this way. But hey, IT WORKS !! lol.. See if that NOTE tag dissertation helps you..

Reply

Or you just could use the <SPAN> tag instead of the <DIV> tag

the span one doesn't add a linefeed to the output so you can have to <span>'s on one line.

If that is what you mean.

here for more info : http://www.w3schools.com/tags/tag_span.asp

Reply

Thanks jipman and m^e, but unfortunately, still doesn't solve the problem... >_< The Span tag works literally the same as the div, as in it still doesn't work, and the note example isn't so much talking about two div blocks placed next to each other.

To put my question baldly: is there some way I can make two div blocks next to each other without
1. Using the float attribute
2. Using position: absolute or position: relative <-- or if these two are needed, would the code still work if it's nested within another div tag.

Reply

THen chiiyo you are doing something wrong here.

Here's an example of the difference of DiV and Span that I created just for you



So I'm sure it should work for you

 

 

 

Reply

Hmm, I understand what you mean, jipman, about how spans are inline and divs are not, but the problem is I have is that I have several LINES of information that I need to be in a block, and the span tag isn't able to "contain" the information in one ordered block. I need two blocks of information, each containing several lines, to be inline. Span can't help me there.

To use your example to illustrate what I mean, I added a second line to each of the span and div tags.



The only way I can contain the lines of information is by using div tags, so my problem is still unsolved...

Reply

Hmm yes i see,

howabout using a table?



This would be better than using postion stuff...

Reply

Yeah, I'm a big table lover, my brain still works the table way, I don't know how many times I've thought, I could just put that in a cell, colspan that, rowspan that, width that....

BUT

I'm trying to make my site XHTML 1.0 compliant, and that means trying as hard as possible not to use tables for layout purposes.

Which goes back to the question, is there, or isn't there a way to place two div blocks next to each other without using float or position?

Reply

Maybe instead of using float for both divs, try absolute positioning one. Then instead of floating the second one, use margins to move it side to side. If you're trying to get the divs closer together then just change the margins of the boxes. Hope this is what you wanted.

[CODE]
<html>
<head>
<title>CSS</title>
<style type="text/css">
#leftbox {
position: absolute;
margin: 0 0 0 50px;
padding: 0;
width: 150px;
height: 150px;
}

#centerbox {
margin: 0 0 0 225px;
padding: 0;
width: 150px;
height: 150px;
}
</style>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#0000FF" VLINK="#800080">
<div id="leftbox">
<span>This should work the way you want it to.</span>
</div>
<div id="centerbox">
<span>Then you can put your form in here.</span>
</div>
</BODY>
</HTML>

Reply

Thank you very much Tobias, that solved my problem! I used ems instead of px to change the margins, because IE:mac seems to respond better to ems than to pxs, but either than that, the code worked perfectly, even when nested within other divs. Exactly what I was looking for, thank you!

Took me a while to actually try it out, what with exams and other stuff, but thanks~

Someone can close this post if you want, problem solved~

Reply