HELP: Creating columns using floats & row height

**zlavine13** · 04-08-2016, 05:22 PM

When creating columns using floats, the following will NOT fix the parent row's height:

a. Setting the parent row's overflow to "hidden" and height to "auto"

b. Setting the parent element's height to "auto"

c. Making the last child of the row a div with the clear declaration set to "both"

(Also, are you able to add hover states on ANY html element or just VISIBLE html elements?)

Thanks!

**sunfighter** · 04-09-2016, 06:43 PM

You need to post your code here so we can see what's wrong with it. In the mean time look at this:

Code:

<!DOCTYPE html>
<html>
<head>
<title>New document</title>
<style type="text/css">
#column_container{
	width: 600px;
	outline: 1px solid red;
}
#column1{
	width: 30%;
	height: 50px;
	margin-right: 5%;
	float: left;
	outline: 1px solid blue;
}
#column2 {
	width: 30%;
	height: 100px;
	margin-right: 5%;
	float: left;
	outline: 1px solid blue;
}
#column3 {
	width: 30%;
	height: 150px;
	float: left;
	outline: 1px solid blue;
}
</style>
</head>
<body>
<div id="column_container">
	<div id="column1"></div>
	<div id="column2"></div>
	<div id="column3"></div>
</div>

</body>
</html>

**coothead** · 04-10-2016, 02:00 AM

Hi there zlavine13,

and a warm welcome to these forums.

Here is a "CSS flex" example...

Code:


<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Simple three column layout</title>

<style media="screen">
body {
    font:1em/1.5em arial,helvetica, sans-serif;
    background-color:#fcf6f6;
 }
h1 {
    font-size:1.8em;
    color:#666;
    text-align:center;
 }
#container {
    display:flex;
    max-width:62.5em;
    padding:0.8em 0.5em;
    margin:auto;
    border:0.1em solid #999;
    box-sizing:border-box;
    box-shadow: 0.6em 0.6em 0.6em #999;
    color:#666;
    background-color:#fff;
 }
.box {
    padding:0.6em;width:33.3%;
    margin:0 0.35em;
    border:0.1em solid #999;
    box-sizing:border-box;
    background-color:#efefef;
 }
.box img {
    display:block;
    width:100%;
    border:0.1em solid #999;
    box-sizing:border-box;
 }

@media screen and (max-width:40em) {
#container {
    display:block;
    padding:0.6em 0.6em 0;
  }
.box {
    width:auto;
    margin:0 0 0.6em;
  }
 }
</style>

</head>
<body>

<h1>Simple three column layout</h1>

<div id="container">

<div class="box">
 <img src="http://www.coothead.co.uk/images/face-1.jpg" alt="">
 <p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
  bibendum tempus faucibus
 </p>
</div>

<div class="box">
 <img src="http://www.coothead.co.uk/images/gaze.gif" alt="">
 <p>
  Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
  sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
  nunc.Fusce ac nisi ac magna scelerisque finibus a.
</p>
</div>

<div class="box">
 <img src="http://www.coothead.co.uk/images/face-2.jpg" alt="">
 <p>
  Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
  purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum. 
  Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius, 
  nulla tellus vulputate ex, vitae euismod erat lectus et magnis dis parturient montes, nascetur.
 </p>
</div>

</div><!-- #container -->

</body>
</html>

coothead

Thread: HELP: Creating columns using floats & row height

Thread Tools

Rate This Thread

HELP: Creating columns using floats & row height

Tags for this Thread

Posting Permissions