By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,767 Members | 1,198 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,767 IT Pros & Developers. It's quick & easy.

Positioning div tags

P: 4
I want to position 2 divs beside each other. The desire is to put the one on the right at an absolute location and have the one on the left 'autostretch'. It can be done with tables but wanted to do it with div tags. Any help would be appreciated.
Feb 17 '07 #1
Share this Question
Share on Google+
4 Replies


drhowarddrfine
Expert 5K+
P: 7,435
I just threw this together. Something like this?
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. </head>
  6. <body>
  7. <div style="position:relative">
  8. <div style="float:left;width:500px;background-color:yellow;">
  9.     <p>Lorem ipsum vis audire malorum omittantur no, ei usu saepe exerci propriae. Tation scribentur in eos. Te qui paulo graeci cotidieque, in duo nostrud liberavisse. Cu nec saepe affert, ea sit iuvaret dissentias. Has tota intellegam constituam ei, pri te dolorum scaevola, solet neglegentur vis ad.
  10. </p></div>
  11.     <div style="position:absolute;width:200px;right:50px;top:50px;background-color:pink">hello</div>
  12. </div>
  13. </body>
  14. </html>
Feb 18 '07 #2

Expert 100+
P: 1,892
I want to position 2 divs beside each other. The desire is to put the one on the right at an absolute location and have the one on the left 'autostretch'. It can be done with tables but wanted to do it with div tags. Any help would be appreciated.
Try something like this:
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2.    "http://www.w3.org/TR/html4/strict.dtd">
  3. <html>
  4. <head>
  5. <title>Test 2 Column</title>
  6. <style type="text/css">
  7. .clsMainContent
  8. {
  9. width: 80%;
  10. height: 90%;
  11. background-color: #ff0000;
  12. position: absolute;
  13. z-index: 0;
  14. }
  15. .clsRightContent
  16. {
  17. left: 80%;
  18. width: 20%;
  19. height: 90%;
  20. background-color: green;
  21. position: absolute;
  22. z-index: 1;
  23. }
  24. </style>
  25.  
  26. </head>
  27. <body>
  28.     <div class="clsMainContent">
  29.     Content Content Content
  30.     </div>
  31.  
  32.     <div class="clsRightContent">
  33.     Smaller Content
  34.     </div>
  35. </body>
  36. </html>
  37.  
Feb 18 '07 #3

P: 4
Not quite, the right div slides over the left, but thanks for the response.
I appreciate all the help even though it won't completely solve the problem, it gets me think and trying other approaches.
Feb 18 '07 #4

P: 4
Oops, I answered the first post, I thought. Yours is working as I wanted. thanks for the reply. I think it will solve my problem. Thanks.
Feb 18 '07 #5

Post your reply

Sign in to post your reply or Sign up for a free account.