Make divs touch edge of page

HTML & CSS
1

HI all,

I have the following code

<div class="full_width">
<div class="third" style="background-color: red">1</div>
<div class="third" style="background-color: blue">2</div>
<div class="third" style="background-color: black">3</div>
</div>

The css for this is

.full_width{
	width:100vw;
}
.third{
	min-width:33.3%;
	float: left;
}

What I would like to happen is the three divs take up the whole width of the page.

I do not want to be able to scroll left of right as they should fit perfectly.

It appears that there is some margin when I run this code but there isn’t.

The leftmost div does not touch the edge of the page.

Any help on this would be appreciated.

Thanks

Adam

2

Based on the dearth of code that you posted, I’ll guess that you may not have set the padding and margins to zero in the <body>.

If that doesn’t work, then try this:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>template</title>
<!--
https://www.sitepoint.com/community/t/make-divs-touch-edge-of-page/256566
-->
    <style type="text/css">
body {
    padding:0;
    margin:0;
}
.full_width {
    display:table;
    width:100%;
    table-layout:fixed;
    border-spacing:0 0;
}
.third {
    display:table-cell;
    vertical-align:top;
}
    </style>
</head>
<body>

<div class="full_width">
    <div class="third" style="background-color: red">1</div>
    <div class="third" style="background-color: blue">2</div>
    <div class="third" style="background-color: black">3</div>
</div>

</body>
</html>
2 Likes
3

HI Ronpat,

I have been doing so googling and found the following that I have added to my css.

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }
  html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

Which has solved my problem

4

Remove the default margin/padding from the html and body elements.

Also rather than use floats I would set the parent to display: table at 100% width and then remove the float property from the children and apply display:table-cell to the children instead. They will also need vertical-align: top added and 33.3% width.

This will provide a more robust layout than floats.

Edit:
Sorry too slow typing on my mobile:)

Please read both Ron’s and my replies which suggest better alternatives to floats.

2 Likes
5

Not recommended.

So much overkill potentially causes more problems than it helps.

And I’ll bet you have no idea why it helped this bit of code and why it might cause problems with others.

Better to learn how to apply needed properties judiciously rather than in blunderbuss fashion.

4 Likes
6

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