CODEWITHSUNDEEP
htmlcssimagealignment
heartcube
heartcube

Reputation: 119

Align 3 pictures in line to rest of the page

I am trying to put three pictures next to each other in one line, each with a header and descrpiction undernearth it, I want the one on the right and left to align with the rest of the page, that has a padding of 4%, like the headers and parargaphs above, and the middle one just yeah in the middle.

But whenever I set the padding to the 4%, the right one will float underneath the first two..

.full-width{
    width: 100%;
    margin: 0 auto;
}
.half-width{
	width: 50%;
	float: left;
}
.third-width{
	width: 33.3333%;
	float: left;
}

img{
    height: 30%;
    width: auto;
}

h1, h3{
    margin: 2% 4%;
}

p{
    text-align: justify;
}

h2{
    text-align: center;
}

h2, p, img{
    margin: auto;
    display: block;
    padding: 2% 0%;
}

#right, #left{
    padding: 0 4%;
    display: block;
}
<h3>text text text 
		</h3>

		<div class="full-width">
		
		<div class="third-width" id="left">
			<img src="img/gary.jpg" alt="Gary">
			<h2>Gary</h2>
			<p>text text</p>
		</div>
		
		<div class="third-width" id="middle">
			<img src="img/howard.jpg" alt="Howard">
			<h2>Howard</h2>
			<p>text text</p>
		</div>

		<div class="third-width" id="right">
			<img src="img/mark.jpg" alt="Mark">
			<h2>Mark</h2>
			<p>text text</p>
		</div>

		</div>
	</main>
</html>

Upvotes: 0

Views: 47

Answers (2)

Tim Barnett
Tim Barnett

Reputation: 1013

Setting the box-sizing seems to fix your problem.

#right, #left{
    padding: 0 4%;
    display: block;
    box-sizing: border-box;
}

See snippet

.full-width{
    width: 100%;
    margin: 0 auto;
}
.half-width{
	width: 50%;
	float: left;
}
.third-width{
	width: 33.3333%;
	float: left;
}

img{
    height: 30%;
    width: auto;
}

h1, h3{
    margin: 2% 4%;
}

p{
    text-align: justify;
}

h2{
    text-align: center;
}

h2, p, img{
    margin: auto;
    display: block;
    padding: 2% 0%;
}

#right, #left{
    padding: 0 4%;
    display: block;
	box-sizing: border-box;
}
<h3>text text text 
		</h3>

		<div class="full-width">
		
		<div class="third-width" id="left">
			<img src="img/gary.jpg" alt="Gary">
			<h2>Gary</h2>
			<p>text text</p>
		</div>
		
		<div class="third-width" id="middle">
			<img src="img/howard.jpg" alt="Howard">
			<h2>Howard</h2>
			<p>text text</p>
		</div>

		<div class="third-width" id="right">
			<img src="img/mark.jpg" alt="Mark">
			<h2>Mark</h2>
			<p>text text</p>
		</div>

		</div>

Upvotes: 2

CalvT
CalvT

Reputation: 3213

What is happening here is the padding is getting added to the width, so the total size is wider than the page.

4% + 33.3% + 4% + 33.3% + 4% + 33.3% + 4% = Over 100%.

Reduce your 33.3% to 28%, and it will work - as below.

.full-width{
    width: 100%;
    margin: 0 auto;
}
.half-width{
	width: 50%;
	float: left;
}
.third-width{
	width: 28%;
	float: left;
}

img{
    height: 30%;
    width: auto;
}

h1, h3{
    margin: 2% 4%;
}

p{
    text-align: justify;
}

h2{
    text-align: center;
}

h2, p, img{
    margin: auto;
    display: block;
    padding: 2% 0%;
}

#right, #left{
    padding: 0 4%;
    display: block;
}
<h3>text text text 
		</h3>

		<div class="full-width">
		
		<div class="third-width" id="left">
			<img src="img/gary.jpg" alt="Gary">
			<h2>Gary</h2>
			<p>text text</p>
		</div>
		
		<div class="third-width" id="middle">
			<img src="img/howard.jpg" alt="Howard">
			<h2>Howard</h2>
			<p>text text</p>
		</div>

		<div class="third-width" id="right">
			<img src="img/mark.jpg" alt="Mark">
			<h2>Mark</h2>
			<p>text text</p>
		</div>

		</div>
	</main>
</html>

Upvotes: 1

Related Questions