noobs question abt css

[polarbear6]

what iam trying to do is have two elements side to side with out using tables
like this


_________ ______________
| |
element 1 | | element 2
| |
_________| |____________

how to do it with css with out using tables

 

[Markbnj]

That would be the default flow for any two elements, so I assume you have other requirements, like that it not wrap, or that it center or something.

 

[polarbear6]

well they are not i mean
i am making each a division
and when i run it
they each sit below each other

this is the css code
#he {
width : 70px;
height : 90px;
background : yellow;
}
#she {



width :90px;
height : 45px;
background: blue;
}

this is the html code
<div id = "he">
</div></td>

<div id = "she">
</div>

and believe me this is all the code that is there in those files as of for now
when i run it both the divisions he and she sit below each other instead of going side by side

 

[Ken g6]

I believe <div> introduces a newline. Try <span> instead.

 

[polarbear6]

Originally posted by: Ken g6
I believe <div> introduces a newline. Try <span> instead.

yeah that seems to work but the problem is that it is not stretching over the space
it is only giving the effect till the text ends

[hehe][haha]
(her hehe and haha are the contents of my element and the bracket is the effect)

i need it to strech over the area i described even if there is no text in that area
AHH i cant explain my problem better than this 🙁 (i wish i could visualize better)

this seems to me like a classical problem with css and html pair
as all the templates i have downloaded seem to be using tables to over come this

 

[presidentender]

You could give us a link to a file representing how it looks now, and a link to an image of what you want.

 

[polarbear6]

i dont know where to host these images
any sites guys where i can host images (i have loads of pics i need to share)


well i want two elements to be side by side without any line break

now iam getting the elements with a line break i mean
one line one element the next line another element

i want them side by side

 

[presidentender]

You need to use <span> instead of <div>, and look through the css reference on w3cschools

 

[polarbear6]

well the span tag is only giving the effect to the text present
its not giving the effect to the empty area
suppose i have 10 lines of text and have another 10 lines of free area(just for the sake of decoration)
only the 10 lines with text is getting the effect(by lines i mean area in pixels)
the rest 10 lines of empty area is being curbed away

 

[presidentender]

Is there an appropriate tag you could put around both of them? You can nest <span>s or <div>s.

 

[polarbear6]

nesting span and div tag is also introducing a line break

so i guess i will have to break my policy and use tables for this 🙁

 

[Snapster]

Span are inline and div's are block elements by default, you can change this in CSS of course:

http://www.brunildo.org/test/inline-block.html

For examples.