How to set three divs side by side

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • JnrJnr
    New Member
    • Oct 2009
    • 88
    #1

    How to set three divs side by side

    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
    Code:
    <div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
    CSS
    Code:
    .left
{
	width:150px;
	height:16px;
	float:left;
	
	border-style:solid;
}
.middle
{
        background-image:url();
	background-repeat:repeat-x;
	height:16px;
	margin-right:auto;
	margin-left:auto;
	
	
	border-style:dotted;
}
.right
{
	width:150px;
	height:16px;
	float:right;
	
	border-style:solid;
}
    any help would be appreciated
    Tags: None
    • michaeldebruin
      New Member
      • Feb 2011
      • 134
      #2
      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

        Comment

        • JnrJnr
          New Member
          • Oct 2009
          • 88
          #3
          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

            Comment

            • michaeldebruin
              New Member
              • Feb 2011
              • 134
              #4
              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.

                Comment

                • Rabbit
                  Recognized Expert MVP
                  • Jan 2007
                  • 12517
                  #5
                  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.

                    Comment

                    • ariful alam
                      New Member
                      • Jan 2011
                      • 185
                      #6
                      @JnrJnr, you used the following:
                      Code:
                      <div class="left">left</div>
<div class="middle">middle</div>
<div class="right">right</div>
                      try the following:
                      Code:
                      <div class="left">left</div>
<div class="right">right</div>
<div class="middle">middle</div>
                      just set the middle div after the right div.

                      Hope help. :)

                        Comment

                        • martin631775
                          Banned
                          New Member
                          • Dec 2012
                          • 13
                          #7
                          try this code.. changes are made in css
                          Code:
                          left
{
    width:150px;
    height:16px;
    float:left;
 
    border-style:solid;
}
.middle
{
        background-image:url();
    background-repeat:repeat-x;
    height:16px;
   float:left;
 
 
    border-style:dotted;
}
.right
{
    width:150px;
    height:16px;
    float:left;
 
    border-style:solid;
}
                          Last edited by Stewart Ross; Dec 31 '12, 11:26 AM. Reason: Link to chat site removed

                            Comment

                            • dianagaby2002
                              New Member
                              • Jul 2012
                              • 9
                              #8
                              divs.html

                              Code:
                              <body>

<div id="container">
		
	<div id="content1">
		Content 1
	</div>

	
	<div id="content2">
		Content 2
		<p class="cont2">
			kdsajfkldjf hjas hh. agiw b whnsjndef wefd
			dsgds gsagb ahfe jjj ajhoijf awjwkndnsnjka<br>
			nhjksd hsa nhaso  hjas hh agi yagb sdejhfdj <br>
			andhwnxdc osaejn ash sajjfhe.
		</p>
	</div>
			
	
	<div id="content3">
		Content 3
	</div>

</div>
	
</body>

                              divs.css

                              Code:
                              div#container{
	width:1200px;
}

div#content1{
	background-color:#0066FF; 
	width:400px; 
	height:650px; 
	float:left;
	top:0px;
	outline:0;
	position:absolute;
}

div#content2{
	background-color:#CCFF99; 
	width:400px;
	height:650px;
	top:0px;
	left:400px;
	margin-left:auto;
	margin-right:auto;
	position:absolute;
	outline:0;
}

div#content3{
	background-color:#FF66FF; 
	height:650px; 
	width:400px; 
	position:absolute; 
	top:0px; 
	left:800px;
	outline:0;
}

p.cont2{
	margin-left:auto;
	margin-right:auto;
}
                              Code:
                              outline:0;
                              is for when you Zoom In the page, the texts in the divs will not go outside the divs.

                              Learn CSS Positioning in Ten Steps: position static relative absolute float
                              http://www.barelyfitz.com/screencast/html-training/css/positioning/

                                Comment

                                Previous template Next
                                Working...