Set width 100% according to screen size

HTML & CSS
1

Hi
i have a div with class container and inside it 3 divs with class sub ,

so when i set container width to 4000px and sub divs width to 100%
sub divs width will be 4000px while i want it to be the same size of the screen .

is there is any solution for this ?

2

You could perhaps try vw units (viewport width).

1 Like
3

Use a grid system (You might already be?), just Google it and I’m sure you will find a grid system if your not.

The grid system that I use, I would use class=“span4” for the three div. 12 grids ( 3 * 4)

.span4 {
  width: 33.33333333333333%;
}

besides give you different spans the grid system will have a clearfix soloution already in it.

This might also help:

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;

goses in the div css.

1 Like
4

Pepster, that won’t help his issue. If his monitor is1000px and he sets the div width to be 4000px. If he set the children to be 33.3% then it would still be greater than the 1000px monitor.

Ralphs suggestion is what the OP is looking for.

1 Like
5

As Ralph said you could do this with the vw unit:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
.wrap {
    width:4000px
}
.child {
    width:100vw;
    background:red;
    margin:10px 0
}
</style>
</head>

<body>
<div class="wrap">
        <div class="child">viewport width</div>
        <div class="child">viewport width</div>
        <div class="child">viewport width</div>
</div>
</body>
</html>

Support is ie9+

A more pertinent question would be “why are you setting a 4000px width in the first place”?

That seems a bit odd to me unless its some sort of slideshow but you still wouldn’t want to force a horizontal scrollbar on the viewport (unless it was one of those awkward sideways scroll sites).

2 Likes
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.