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

How to set three divs side by side

JnrJnr
P: 88
Hi all, could someone please help me. I am trying to put three divs side by side but the middle div has to have a margin-left:auto and margin-right:auto to stretch with the browser window.
I would like to have the right div look the same as the left div (all divs should be in one straight line). At the moment the right div gets pushed down bellow the middle div.
HTML
Expand|Select|Wrap|Line Numbers
  1. <div class="left">left</div>
  2. <div class="middle">middle</div>
  3. <div class="right">right</div>
  4.  
CSS
Expand|Select|Wrap|Line Numbers
  1. .left
  2. {
  3.     width:150px;
  4.     height:16px;
  5.     float:left;
  6.  
  7.     border-style:solid;
  8. }
  9. .middle
  10. {
  11.         background-image:url();
  12.     background-repeat:repeat-x;
  13.     height:16px;
  14.     margin-right:auto;
  15.     margin-left:auto;
  16.  
  17.  
  18.     border-style:dotted;
  19. }
  20. .right
  21. {
  22.     width:150px;
  23.     height:16px;
  24.     float:right;
  25.  
  26.     border-style:solid;
  27. }
any help would be appreciated
Sep 7 '12 #1
Share this Question
Share on Google+
7 Replies


100+
P: 134
I can see that the middle div doesn't have a float:left; already tried to add it? And otherwise you might consider using one big div, and place the three divs you want in one straight line within the "main div". Then you just simply have to give the main div a float left and all the other divs will get it. It might help you out if you're playing a little bit with that.
Good luck,
Michael
Sep 7 '12 #2

JnrJnr
P: 88
Hi michaeldebruin, thanks for the response. It did not work by creating a wrapper and placing the three divs side by side. Also I did try and put float left on the middle div but then the div loses its "auto margins" and wont stretch with the window when resizing the browser.

Any more ideas?

here is a small visible example-
the right div must be inline with the rest
Sep 10 '12 #3

100+
P: 134
sorry that's the only thing I was thinking off. Maybe it's an idea to look for some tutorials. You might find the answer in one of them.
Sep 10 '12 #4

Rabbit
Expert Mod 10K+
P: 12,430
The only thing that comes to mind is to use javascript to get the screen width and set it that way or use percentage widths instead of hard coded widths.
Sep 10 '12 #5

ariful alam
100+
P: 185
@JnrJnr, you used the following:
Expand|Select|Wrap|Line Numbers
  1. <div class="left">left</div>
  2. <div class="middle">middle</div>
  3. <div class="right">right</div>
try the following:
Expand|Select|Wrap|Line Numbers
  1. <div class="left">left</div>
  2. <div class="right">right</div>
  3. <div class="middle">middle</div>
just set the middle div after the right div.

Hope help. :)
Sep 11 '12 #6

P: 13
try this code.. changes are made in css
Expand|Select|Wrap|Line Numbers
  1. left
  2. {
  3.     width:150px;
  4.     height:16px;
  5.     float:left;
  6.  
  7.     border-style:solid;
  8. }
  9. .middle
  10. {
  11.         background-image:url();
  12.     background-repeat:repeat-x;
  13.     height:16px;
  14.    float:left;
  15.  
  16.  
  17.     border-style:dotted;
  18. }
  19. .right
  20. {
  21.     width:150px;
  22.     height:16px;
  23.     float:left;
  24.  
  25.     border-style:solid;
  26. }
Dec 31 '12 #7

dianagaby2002
P: 9
divs.html

Expand|Select|Wrap|Line Numbers
  1. <body>
  2.  
  3. <div id="container">
  4.  
  5.     <div id="content1">
  6.         Content 1
  7.     </div>
  8.  
  9.  
  10.     <div id="content2">
  11.         Content 2
  12.         <p class="cont2">
  13.             kdsajfkldjf hjas hh. agiw b whnsjndef wefd
  14.             dsgds gsagb ahfe jjj ajhoijf awjwkndnsnjka<br>
  15.             nhjksd hsa nhaso  hjas hh agi yagb sdejhfdj <br>
  16.             andhwnxdc osaejn ash sajjfhe.
  17.         </p>
  18.     </div>
  19.  
  20.  
  21.     <div id="content3">
  22.         Content 3
  23.     </div>
  24.  
  25. </div>
  26.  
  27. </body>

divs.css

Expand|Select|Wrap|Line Numbers
  1. div#container{
  2.     width:1200px;
  3. }
  4.  
  5. div#content1{
  6.     background-color:#0066FF; 
  7.     width:400px; 
  8.     height:650px; 
  9.     float:left;
  10.     top:0px;
  11.     outline:0;
  12.     position:absolute;
  13. }
  14.  
  15. div#content2{
  16.     background-color:#CCFF99; 
  17.     width:400px;
  18.     height:650px;
  19.     top:0px;
  20.     left:400px;
  21.     margin-left:auto;
  22.     margin-right:auto;
  23.     position:absolute;
  24.     outline:0;
  25. }
  26.  
  27. div#content3{
  28.     background-color:#FF66FF; 
  29.     height:650px; 
  30.     width:400px; 
  31.     position:absolute; 
  32.     top:0px; 
  33.     left:800px;
  34.     outline:0;
  35. }
  36.  
  37. p.cont2{
  38.     margin-left:auto;
  39.     margin-right:auto;
  40. }
Expand|Select|Wrap|Line Numbers
  1. outline:0;
is for when you Zoom In the page, the texts in the divs will not go outside the divs.

http://www.barelyfitz.com/screencast...s/positioning/
Jan 8 '13 #8

Post your reply

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