CODEWITHSUNDEEP
css
user2820604
user2820604

Reputation: 281

2 Full Screen Divs with float left

I am trying to make a UL or DIV's where each list item / child div is full screen (100% width 100% height) and floated left so i can scroll horizontally through them, any idea how I can do this? here is my code but it is not working as I had thought

HTML:

<html>
<body>

<div id="site-holder">

   <div class="toronto-full">
   TESTING
   </div>

   <div class="montreal-full">
   TESTING
   </div>

</div>

</body>
</html>

CSS:

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

#site-holder { width:100%; height:100%; margin:0; padding:0; float:left; }

.toronto-full {background-color:green; width:50%; height:100%; float:left; }
.montreal-full {background-color:red; width:50%; height:100%; float:left; }

Any Ideas?

Upvotes: 1

Views: 3084

Answers (2)

matewka
matewka

Reputation: 10158

FIDDLE

Try this:

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

#site-holder {
    width:100%;
    height:100%; 
    margin:0; 
    padding:0; 
    white-space: nowrap;
    font-size: 0;
}

.toronto-full, .montreal-full {
    width: 100%;
    height: 100%;
    display: inline-block;
    vertical-align: top; /* this line added in edit */
    font-size: initial;
}
.toronto-full {
    background: green;
}
.montreal-full {
    background: red;
}

EDIT:
Review the code again. I added a line which fixes the problem with vertical mismatch of the divs.

Upvotes: 2

Ron van der Heijden
Ron van der Heijden

Reputation: 15080

Why do you even want to use float for this?

You could use inline-block display;

.toronto-full {
    background-color:green;
    width:50%;
    height:100%;
    display: inline-block;
}
.montreal-full {
    background-color:red;
    width:50%;
    height:100%;
    display: inline-block;
}

Example: http://jsfiddle.net/7DxFE/

Upvotes: 1

Related Questions