CODEWITHSUNDEEP
csshtmlcss-float
Luuk
Luuk

Reputation: 1999

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. enter image description here 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 using percentages or is this simply not possible. If so, please tell me how to do this with css.

Thanks in advance!

Upvotes: 9

Views: 7343

Answers (6)

Johan Davidsson
Johan Davidsson

Reputation: 2972

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;
}

Upvotes: 10

GrantVS
GrantVS

Reputation: 2221

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>

Upvotes: 0

clairesuzy
clairesuzy

Reputation: 27624

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;}

Upvotes: 3

aardvarkk
aardvarkk

Reputation: 15996

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.

Upvotes: 4

andy magoon
andy magoon

Reputation: 2929

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>

Upvotes: 0

DoctorMick
DoctorMick

Reputation: 6793

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.

Upvotes: 1

Related Questions