2 divs both 100% next to each other_问答_开发者

Quite simple question but tried about everything.

what i want is 2 (actually 5) divs next to eachother with the class "container" so i can make a horizontal 1page website. Each div has to be 100% wide. so 2 divs mean 2 screens next to eachother.

This is the css line i have now:

.container { width: 100%; float: left; display: inline; }

I cant get them to line up next to each other.

Here is a visual to make it more clear.

2 divs both 100% next to each other

image url for bigger preview: http://www.luukratief.com/stackoverflow.png

The scrolling part is not the issue for me, just the placement of the divs.

Is this possible开发者_JAVA百科 using percentages or is this simply not possible. If so, please tell me how to do this with css.

Thanks in advance!

You can make a container with 200% width and then put two divs inside of that element with 50% width so you will make sure that one div always gets the whole visitors screen width.

For example:

<div class="container">
    <div class="contentContainer"></div>
    <div class="contentContainer"></div>
</div>

And CSS:

.container {
    width: 200%;
}

.contentContainer {
    width: 50%;
    float: left;
}

How does this look to you?

http://jsfiddle.net/2wrzn/19/

Note that the border isn't required. I was using it for testing. Turning it on also makes one of the divs wrap around, so it's turned off.

you should use display: inline-block; instead of float anf then wrap all five divs in another container or use the body element and add white-space: nowrap to it.

If the design is incredibly pixel perfect, you can remove the actual "word-spacing" between the inline-blocks by removing the whitespace in the HTML or by giving them a negative right margin of about 0.25em; but if scrolling to new "page" you dn't notice it anyway..

Example Fiddle

HTML Code:

<div class="container" id="p1">Page 1 => <a href="#p2">Next page</a></div>
<div class="container" id="p2">Page 2 => <a href="#p3">Next page</a></div>
<div class="container" id="p3">Page 3 => <a href="#p4">Next page</a></div>
<div class="container" id="p4">Page 4 => <a href="#p5">Next page</a></div>
<div class="container" id="p5">Page 5 => <a href="#p1">Next page</a></div>

CSS:

html, body {margin: 0; padding: 0; height: 100%;}

body {white-space: nowrap;}

.container {
   display: inline-block;
   width: 100%;
   height: 100%;
}

.container {
   display: inline !ie7; /* for working inline-blocks in IE7 and below */
}

.container * {white-space: normal;}

#p1 {background: #fcf;}
#p2 {background: #ff0;}
#p3 {background: #cfc;}
#p4 {background: #abc;}
#p5 {background: #cba;}

If you want them next to each other then they can't be 100%. width: 100% will force the div to take up the full width of it's containing element, in this case the full width of the window I guess.

If you want two screens next to each other you'd need to set the width of each to 50%. If I've misunderstood you're question add a bit more detail.

You could try something like this, but you may have compatibility problems with IE and table* (but you can consider http://code.google.com/p/ie7-js/ to fix that)

<!DOCTYPE html>
<html>
<head>
<style>
html { width: 500%; display: table; }
body { width: 100%; display: table-row; overflow-x: scroll}
.container { width: 20%; display: table-cell; }
</style>
<body>
<div class="container">Test1</div>
<div class="container">Test2</div>
<div class="container">Test3</div>
<div class="container">Test4</div>
<div class="container">Test5</div>

The % width of the divs is a percentage of the width of the tags they are contained in and ultimately the body tag (i.e. not the window). So the body tag must be 100 * n where n is the number of div tags you want side-by-side. The example below has 2 div tags thus the body is 200% (2 * 100). Each the div tag's; width is a percentage of the body tag's width roughly 100 / n (need a smidgen less). Don't forget to factor in margin and padding. Here's an example:

<html>
 <head>
  <style type="text/css">
    body{
     width:200%;
     margin:0%;
     padding:0%;
    }

    #dvScreen1, #dvScreen2{
     width:49.95%;
     height:80%;
     clear:none;

    }
    #dvScreen1 {
    float:left;
    border:solid black 1px
   }

   #dvScreen2{
    float:right;
    border:solid blue 1px
   }
  </style>
 </head>
 <body>
   <div id="dvScreen1">
   <p>Screen 1 stuff ...</p>
  </div>
  <div id="dvScreen2">
   <p>Screen 2 stuff ...</p>
  </div>
 </body>
</html>