Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

DIV Side by Side 1

Status
Not open for further replies.
ToddWW

ToddWW

Programmer
Mar 25, 2001
1,073
US
This is probably simple but I couldn't fine the solution in search.

Here is my code.. Actually, just a simple example. My actual example has images,tables,spans,etc.. inside each main div.

Code: 
<body>
   <div>Hello How Are You</div>
   <div>I am fine</div>
</body>

That displays in IE...

Hello How Are You
I am fine

How do I get it to display side by side like this.

Hello How Are You I am fine

Thanks in advance for your help.

ToddWW
 
Sort by date Sort by votes
<Div> is made for Division. Using two different <Div>, you will not get the output of two <DIV> in one line.
You can put those two <DIV> in a table as shown here to get the desired output. Do not provide any attributes to the table.

<body>
<table>
<tr>
<td><div>Hello How Are You</div></td>
<td><div>I am fine</div></td>
</tr>
</table>
</body>

Sharing the best from my side...

--Prashant--
 
Upvote 0 Downvote
Thats true...You are right.
But Toddww is having some images, table, spans in those DIVs. The DIV doesn't give exact output with FireFox(FF) and when you make it floating, it creates more problems with FF. Also if you change the window size, the DIV causes the problems again as due to float effect.
The most of the problems are with FF. If you don't want your page to support FF, then you can go by floating.


Sharing the best from my side...

--Prashant--
 
Upvote 0 Downvote
I use floats and all the available css arsenal to create pages. I have not used a table for layout in more than two years now. It is true that it is sometimes frustrating to see IE not behave like it should and having to cater to its specific needs, but overall it is more than worth it. And I have not had any problem with FireFox (or any Gecko based browser) in my whole time as a css developer.
 
Upvote 0 Downvote
There are several ways of getting <div>s side-by-side. Floating both is probably easiest, but you can also give one <div> a left or right margin into which you float the other one, or use absolute positioning.

You probably need to come up with a test case that's closer to what you actually want to do. Try googling for "CSS layout" for some further ideas.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd
 
Upvote 0 Downvote
pgorule,

[ol][li]are you serious?[/li][li]where do you see ToddWW's images, tables and spans?[/li][li]using a complete doctype, valid HTML markup and CSS and a thorough understanding of web development, a developer can achieve pretty much any affect he/she desires. table-based layouts are antiquated, outdated, and a bandwidth hog.[/li][li]don't blame firefox for following the rules of the W3.[/li][/ol]



*cLFlaVA
----------------------------
[tt]somebody set up us the bomb![bomb][/tt]

[URL unfurl="true"]http://www.coryarthus.com/[/url]
 
Upvote 0 Downvote
Vragabond,

That worked beautifully.

Code: 
<body>
<div id="box1" style="float:left; height:50px; width:200px; margin-right:2px; border:solid black 1px;">
</div>
<div id="box2" style="float:left; height:50px; width:200px; margin-right:2px; border:solid black 1px;">
</div>
</body>

Puts two boxes right next to each other with a 2px gap in-between. float:right; worked also, but started on the right margin working left.

That was a great time saver!

ToddWW
 
Upvote 0 Downvote
ToddWW,

To get control of how divs float, for instance if the window is resized or too narrow (what pgorule refers to as "a problem"), here's the trick: just wrap your divs in yet another div...

Try this:
Code: 
<body>
  <div style="width:408px;">
    <div id="box1" style="float:left; height:50px; width:200px; margin-right:2px; border:solid black 1px;">
    </div>
    <div id="box2" style="float:left; height:50px; width:200px; margin-right:2px; border:solid black 1px;">
    </div>
  </div>
</body>

By the way - do test your work in more than one browser to ensure the result is what you expect it to be. I test in IE, FF, NN, Safari and Opera - it's worth while. And as time goes by, you learn how to avoid common design/layout pittfalls.

Regards


Jakob
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

tyutghf
  • Locked
  • Question
Slanted divs
Replies
0
Views
629
tyutghf
tyutghf
jason.lex
  • Locked
  • Question
crop image to fit in a div box?
Replies
2
Views
184
jason.lex
jason.lex
tyutghf
  • Locked
  • Question
Hide div on input focus
Replies
2
Views
123
tyutghf
tyutghf
kurio71
  • Locked
  • Question
Centre a DIV Regardless of Screen Size 2
Replies
7
Views
200
ChrisHirst
ChrisHirst
dvannoy
  • Locked
  • Question
Center a div within an asp.net content placeholder 1
Replies
1
Views
447
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top