Need help with grid sizing

Status
Not open for further replies.

Kit_Pantelope

New Member
Lol. Is this a Mitch Hedberg joke?

I mean some text takes up more lines than others which affects the div boxes, and makes for the lopsided grid.
 

Kit_Pantelope

New Member
I have some real hosting through godaddy, but I haven't uploaded this document. And, I'm not too comfortable with uploading it so it may be a day or two.
 

chrishirst

Well-Known Member
Staff member
Just post the source (and any external image references) so I can I put it on my dev server, sounds glamorous but these days it's just a Raspberry Pi on a shelf, running Apache. :)
 

Kit_Pantelope

New Member
<head>
<title>Elements of Design by Kitteryk Novask</title>
<link href="https://fonts.googleapis.com/css?family=Lora:400,400i,700|Open+Sans:400,400i,700" rel="stylesheet">
</head>


<body>
<header class="main-header">
<div class="container clearfix">
<h1 class="name"><a href="#">Elements of Design</a></h1>
<ul class="main-nav">
<li><a href="">Agency</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Projects</a></li>
</ul>
</div>
</header>

<div class="banner">
<img class="logo" src="https://image.ibb.co/irCWdv/foxplaceholder_1.png" alt="foxplaceholder_1">
<h1 class="headline">We should know the principals of design</h1>
<span class="tagline">Because without them, we'll never turn visitors into customers</span>
</div>
<!-- end of banner-->

<div class="container clearfix" <section class="container col">
<section class="col">
<h2 class="grid-headtag">Aesthetic-Usability Affect</h2>
<p>Lorem ipsum dolor sit amet, usu ad nulla antiopam, quodsi sanctus at eum, dissentiet appellantur in quo.</p>
</section>

<section class="col">
<h2 class="grid-headtag">Alignment</h2>
</section>

<section class="col">
<h2 class="grid-headtag">Garbage In, Garbage Out</h2>
</section>

<section class="col">
<h2 class="grid-headtag">Hierarchy</h2>
</section>

</div>
<!-- end of container clearfix -->

<footer class="main-footer">
<span>&copy;Kit Navo of Pantelope</span>
</footer>

</body>
 

Kit_Pantelope

New Member
/**********************
Base Styles
**********************/

* {
box-sizing: border-box;
}

body {
font-family: 'Open Sans', sans-serif;
line-height: 1.6em;
}

body,
a {
color: #36424A;
}

p {
font-size: .95em;
}

h1,
h2,
h3,
.tagline {
font-family: 'Lora', serif;
}

h1 {
font-size: 1.5em;
line-height: 2em;
}

a {
text-decoration: none;
}

li {
list-style: none;
width: 100px
}

.main-nav a:hover {
color: #D51700;
}

.grid-headtag {
font-size: 1.3em;
}

.col:hover {
background: #D51700;
color: #fff;
cursor: pointer;
}

section p {
font-size: .85em;
}

/**********************
Base Layout Styles
**********************/

.main-header {
text-align: center;
}

.main-nav li {
display: inline-block;
margin: 0 auto;
text-align: center;
}

.banner {
text-align: center;
padding: 20px 0;
margin: 40px
}

.container {
max-width: 800px;
margin: 0 auto;
}

.col {
width: 49%;
float: left;
text-align: center;
padding: 100px 30px;
background: #fff;
border: 2px solid #CCCAA9;
box-sizing: border-box;
}

.main-footer {
padding: 30px;
text-align: center;
background: #E21100;
margin-top: 50px;
color: #fff;
}

/* ---- Float clearfix ---- */

.clearfix::after {
content: " ";
display: table;
clear: both;
}

/****** http://www.colourlovers.com/palette/728979/Sharp ****/
 

chrishirst

Well-Known Member
Staff member
I didn't know how to post code here,

It's the "insert" icon, to the left of the 'save' button.

Okay, when you 'float' elements that are going to have variable height text content you need to give them a fixed height.

And to avoid individual scroll bars use overflow: hidden; on the child elements.
 

Kit_Pantelope

New Member
you're a beast; the height made it work perfectly! and fyi, if you want to listen to some funny shit, check out mitch hedberg. his jokes are really funny.

Thanks for the tip on posting code.

In this case, do I need to apply overflow property to the class .col or to the elements inside .col?
 

Phreaddee

Super Moderator
Staff member
I would argue the case for using min-height instead of height as then if it DOES blow out it stays within its box.
 
Status
Not open for further replies.
Top