CODEWITHSUNDEEP
htmlcssstyling
user983988
user983988

Reputation:

HTML + CSS Spacing issue when adding content to a widget

I'm trying to put together a webpage and am finding that I keep getting white spacing appear when I add content to a widget box.

When I add a H2 in the widgetOne class I'm finding it then pushes the next two widgets down and a white space appears.

I have placed my code on codepen so that it's easier to review: http://codepen.io/s_bruno1/pen/WRgVVm

        <div class="widget widgetOne">
            <h2>Test Heading</h2>
            <a href="">Find out more</a>
            <button>Test</button>
        </div>

If anyone is also able to advise how best to code the percentages it will be greatly appreciated. I have attempted this myself but don't feel it's probably the best way.

Upvotes: 3

Views: 953

Answers (3)

toolbox3
toolbox3

Reputation: 116

Your percentages are fine. Try floating your widgets

.widgetOne, .widgetTwo, .widgetThree {
    float: left;
{

Upvotes: 1

Joseph Marikle
Joseph Marikle

Reputation: 78520

Based on the CSS from the codepen, your widgets have display:inline-block. What's happening is your widgets are trying to adjust their vertical alignment based on the rules of fonts, which factor in vertical alignment, font size, line height, etc. (because that's how inline based elements work). Try adding vertical-align: top; to .widget. This will align all the widgets correctly.

html, body, div, p, ul, li, ol, img, span, a {
    margin: 0;
    padding: 0;
    font-family: 'Fira Sans', sans-serif;
}

li {
	display: inline;
	list-style-type: none;
	background-color: red;
	padding: 0;
	margin: 0;
}

.topNavLeft li {
	float: left;
}

.topNavRight li {
	float: right;
}

.subHeading li {
	float: right;
}

.mainHeader {
	padding: 30px;
	background-color: #66d6ea;
	color: white;
}

.mainHeader h1 {
	font-size: 70px;
}

.mainHeader p {
	font-size: 35px;
}

.inner {
	width: 1290px;
	margin: 0 auto;
}

.widgets {
	width: 102%;
}

.widget {
	min-height: 400px;
	display: inline-block;
	margin-bottom: 15px;
  vertical-align: top;
}

.widgetOne {
	width: 32%;
	background-color: blue;
}

.widgetTwo {
	width: 32%;
	background-color: green;
	margin-right: 1%;
	margin-left: 1%;
}

.widgetThree {
	width: 32%;
	background-color: orange;
}

.widgetFour {
	width: 48.35%;
	background-color: pink;
	margin-right: 1%;
}

.widgetFive {
	width: 48.35%;
	background-color: silver;
}

.widgetSix {
	width: 59%;
	background-color: gold;
	margin-right: 1%;
}

.widgetSeven {
	width: 37.7%;
	background-color: purple;
}
<html>
<head>
	<title>Water Choice</title>
	<link rel="stylesheet" type="text/css" href="css/main.css">
    <link href="https://fonts.googleapis.com/css?family=Fira+Sans:400,700" rel="stylesheet">
</head>
<body>

	<ul class="topNavLeft">
		<li>Home</li>
		<li>Business</li>
		<li>Our Company</li>
		<li>News & Media</li>
		<li>Careers</li>
	</ul>

	<ul class="topNavRight">
		<li>Log In</li>
		<li>Register</li>
	</ul>
	<br>
	<br>
	<br>
	<div class="inner">

		<ul class="subHeading">
			<li>IMAGE PLACER</li>
			<li>Your account</li>
			<li>Our services</li>
			<li>Your water</li>
			<li>Get help</li>
			<li>Search Icon</li>
		</ul>
		<br>

		<div class="mainHeader">
			<h1>Moving or adding premises</h1>
			<p>Ecerepro ipidebisci de volesequi officimet ilicitibusam sum <br> sam dita qui consedi sinitiincto consequi nate Ceperspi <br> cturio in nossitiatur, ommodis dolorrorit faciistis.</p>
		</div>
		<div class="widgets">
			<div class="widget widgetOne">
                <h2>Test Heading</h2>
                <a href="">Find out more</a>
                <button>Test</button>
			</div><div class="widget widgetTwo">
				<p>Widget Two Placeholder</p>
			</div><div class="widget widgetThree">
				<p>Widget Three Placeholder</p>
			</div><div class="widget widgetFour">
				<p>Widget Four Placeholder</p>
			</div><div class="widget widgetFive">
				<p>Widget Five Placeholder</p>
			</div><div class="widget widgetSix">
				<p>Widget Six Placeholder</p>
			</div><div class="widget widgetSeven">
				<p>Widget Seven Placeholder</p>
			</div>
		</div>
	</div> <!--inner end-->

</body>
</html>

Upvotes: 0

muratkh
muratkh

Reputation: 123

your problem is vertical align is not set. here is the code to make it work

.widget {
    min-height: 400px;
    display: inline-block;
    margin-bottom: 15px;
    vertical-align: top;
}

Upvotes: 2

Related Questions