Przemek Wojtas Przemek Wojtas - 2 months ago 5
CSS Question

How to use div classes to get my blocks to line up?

I am creating a website for my assignment for university. My teacher told me to use div classes so that my CSS code will be reduced but here are the problems. I have div class for images and they are supposed to be next to each other in a same row.

I have another 3 div class boxes for text which should be below divs with images, and also I have 2 background images one of them should be on left hand side and other one on right so it creates a flag of Italy. I have tried everything I can thing of but I still cannot make it work properly. Can anyone help?

This is what I want to achieve roughly

http://jsfiddle.net/p2uwm8ye/

<!DOCTYPE html> <!-- This is standard HTML code that tells the browser it is a HTML page-->
<html lang="en-GB"> <!-- This tells the browser what language html is using-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link href="CSS/style.css" rel="stylesheet" type="text/css"> <!-- This is linking style sheet (css)into this HTML page-->
<title>Main Page</title> <!-- This is a code that displays title of the page-->
</head>
<body>
<header id="pageHeader"><!-- This header tag is used to create a navigation bar-->
<nav id="site"><!-- This is a navigation tag which allows to link different webpages together-->
<ul>
<li><a href="index.html">Home Page</a></li>
<li><a href="html/tables.html">Tables</a></li>
<li><a href="html/forms.html">Feedback</a></li>
<li><a href="html/text.html">About Us</a></li>
<li><a href="html/references.html">References</a></li>
<li><a href="html/validation.html">Validation</a></li>
</ul>
</nav>
</header>
<div id="welcome"><!-- This is a div tag that is used to create a welcome message on my website-->
<h1>Papa Italiano</h1>
</div>
<div class="images"><!-- This div class I have used to put three images using just one piece of css code which reduced the code-->
<figure>
<img src="images/image11.jpg" alt="photo" />
<figcaption>Food 1</figcaption>
</figure>
</div>
<div class="images">
<figure>
<img src="images/image22.jpg" alt="photo" />
<figcaption>Food 2</figcaption>
</figure>
</div>
<div class="images">
<figure>
<img src="images/image32.jpg" alt="photo" />
<figcaption>Food 3</figcaption>
</figure>
</div>
<div class="text"></div><!-- similar to div class for images however this is for text-->
<div class="text"></div>
<div class="text"></div>
<div class="clearing"></div><!-- this div class is basically making sure that my other div classes will not go into each other-->
</div>
<div id="background">
<figure>
<img src="images/background1.jpg" alt="background photo" />
</figure>
</div>
<div id="background2">
<figure>
<img src="images/background2.jpg" alt="background photo" />
</figure>
</div>
</body>
</html>


And here is the css

header#pageHeader{
position: absolute;
top: 0px;
left: 0px;
width: 1024px;
height: 80px;
background-color: black;
opacity: 0.5;
}/* this is my css for a navigation bar*/
nav#site li{
list-style:none;
display:inline-block;
zoom:1;
width:160px;
}/*This is used to style my links*/
nav a{
text-decoration: none;
color: #FF0;
}/* This is used to style look of the links*/
.images{
float: left;
width: 250px;
border-style: solid;
border-width: 3px;
padding: 10px;
margin: 30px;
z-index: 1;
vertical-align: middle;
}/*This is telling my all div class images how they need to be styled*/
#welcome{
position: relative;
top: 100px;
left: 300px;
width: 300px;
height: 80px;
font: arial;
font-size: 23px;
color: green;
margin-bottom: 75px;
}/*This is telling browser how to style my div welcome*/
.text{
position: relative;
height: 300px;
width: 250px;
left: 0px;
float: left;
border-style: solid;
border-width: 3px;
margin: 100px;
display: inline-block;
}/*Similar to .images however this piece of codes is used for my text*/
#background{
height: 80px;
width: 250px;
left: 0px;
}
#background2{
height: 80px;
width: 250px;
right: 0px;
}
.clearing{
clear: both;
}

Answer

I am not sure I have understood everything you wanted but that might help you. To improve your coding skills you should learn more about:

Study the following code and play with it to better understand how things work together. Good luck and have fun learning!

SOLUTION 1 (inline-block hack with <!--)

#pageHeader {
    background-color: grey;
    /* As there is nothing behind your #pageHeader, it is better to choose a grey color with no opacity */
    min-height: 80px;
}
nav {
    width: 90%;
    margin: 0 auto;
    /* This code will center your navigation bar. The 90% width will give it space. */
}
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
nav li {
    display:inline-block;
    width: 16.6666666%;
    /* 100% (full-width) / 6 (as you have 6 elements in your nav bar) */
    text-align: center;
    vertical-align: middle;
}
nav a {
    text-decoration: none;
    color: #FF0;
}
nav a:hover {
    /* always define a style for your links when they are hovered. This is a suggestion of style. */
    border-bottom: 1px solid #FF0;
    padding-bottom: 3px;
}
.main { /* This is for your italian flag in the background. If you need to support more browser just use a compress image instead. Note that this code is not cross-browser, check required code on Mozilla Developer Network */
    background-image: -webkit-linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
    background-image: linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
}
.wrapper {
    /* you wrap your main elements so that you don't have to reproduce this style every time */
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
h1 {
    font: arial;
    font-size: 23px;
    color: green;
    padding: 20px 0 75px;
    margin: 0;
}
.images {
    display: inline-block;
    width: 32%;
    /* 100% / 3 images per row */
    background-color: #e3e3e3;
    vertical-align: top;
}
.images figure {
    margin: 0;
}
img {
    width: 100%;
    height: auto;
}
figure figcaption, figure p {
    text-align: left;
}
<header id="pageHeader">
    <nav>
        <ul>
            <li><a href="index.html">Home Page</a></li><!-- 
            --><li><a href="html/tables.html">Tables</a></li><!-- 
            --><li><a href="html/forms.html">Feedback</a></li><!-- 
            --><li><a href="html/text.html">About Us</a></li><!-- 
            --><li><a href="html/references.html">References</a></li><!-- 
            --><li><a href="html/validation.html">Validation</a></li>
        </ul>
    </nav>
</header>
<section class="main">
    <div class="wrapper">
         <h1>Papa Italiano</h1>

        <div class="images">
            <!-- This div class I have used to put three images using just one piece of css code which reduced the code-->
            <figure>
                <img src="http://lorempixel.com/300/250/food" alt="photo" />
                <figcaption>Food 1</figcaption>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </figure>
        </div>
        <div class="images">
            <figure>
                <img src="http://lorempixel.com/300/250/food" alt="photo" />
                <figcaption>Food 2</figcaption>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </figure>
        </div>
        <div class="images">
            <figure>
                <img src="http://lorempixel.com/300/250/food" alt="photo" />
                <figcaption>Food 3</figcaption>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </figure>
        </div>
    </div>
</section>

SOLUTION 2 (inline-block hack with margin-right: -4px;)

#pageHeader {
    background-color: grey;
    /* As there is nothing behind your #pageHeader, it is better to choose a grey color with no opacity */
    min-height: 80px;
}
nav {
    width: 90%;
    margin: 0 auto;
    /* This code will center your navigation bar. The 90% width will give it space. */
}
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
nav li {
    display:inline-block;
    width: 16.6666666%;
    /* 100% (full-width) / 6 (as you have 6 elements in your nav bar) */
    text-align: center;
    vertical-align: middle;
    margin-right: -4px; /* 2nd trick to remove space between inline-blocks) */
}
nav a {
    text-decoration: none;
    color: #FF0;
}
nav a:hover {
    /* always define a style for your links when they are hovered. This is a suggestion of style. */
    border-bottom: 1px solid #FF0;
    padding-bottom: 3px;
}
.main { /* This is for your italian flag in the background. If you need to support more browser just use a compress image instead. Note that this code is not cross-browser, check required code on Mozilla Developer Network */
    background-image: -webkit-linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
    background-image: linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
}
.wrapper {
    /* you wrap your main elements so that you don't have to reproduce this style every time */
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
h1 {
    font: arial;
    font-size: 23px;
    color: green;
    padding: 20px 0 75px;
    margin: 0;
}
.images {
    display: inline-block;
    width: 32%;
    /* 100% / 3 images per row */
    background-color: #e3e3e3;
    vertical-align: top;
}
.images figure {
    margin: 0;
}
img {
    width: 100%;
    height: auto;
}
figure figcaption, figure p {
    text-align: left;
}
<header id="pageHeader">
    <nav>
        <ul>
            <li><a href="index.html">Home Page</a></li> 
            <li><a href="html/tables.html">Tables</a></li> 
            <li><a href="html/forms.html">Feedback</a></li> 
            <li><a href="html/text.html">About Us</a></li> 
            <li><a href="html/references.html">References</a></li> 
            <li><a href="html/validation.html">Validation</a></li>
        </ul>
    </nav>
</header>
<section class="main">
    <div class="wrapper">
         <h1>Papa Italiano</h1>

        <div class="images">
            <!-- This div class I have used to put three images using just one piece of css code which reduced the code-->
            <figure>
                <img src="http://lorempixel.com/300/250/food" alt="photo" />
                <figcaption>Food 1</figcaption>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </figure>
        </div>
        <div class="images">
            <figure>
                <img src="http://lorempixel.com/300/250/food" alt="photo" />
                <figcaption>Food 2</figcaption>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </figure>
        </div>
        <div class="images">
            <figure>
                <img src="http://lorempixel.com/300/250/food" alt="photo" />
                <figcaption>Food 3</figcaption>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </figure>
        </div>
    </div>
</section>

SOLUTION 3 (just use floated block elements)

#pageHeader {
    background-color: grey;
    /* As there is nothing behind your #pageHeader, it is better to choose a grey color with no opacity */
    min-height: 80px;
}
nav {
    width: 90%;
    margin: 0 auto;
    /* This code will center your navigation bar. The 90% width will give it space. */
}
nav:after { /* To clear elements after the nav. As you use floated li you have to clear after) */
  content: "";
  display: table;
  clear: both;
}
nav ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
nav li {
    float: left; /* Third way to align li elements */
    width: 16.6666666%;
    /* 100% (full-width) / 6 (as you have 6 elements in your nav bar) */
    text-align: center;
}
nav a {
    text-decoration: none;
    color: #FF0;
}
nav a:hover {
    /* always define a style for your links when they are hovered. This is a suggestion of style. */
    border-bottom: 1px solid #FF0;
    padding-bottom: 3px;
}
.main { /* This is for your italian flag in the background. If you need to support more browser just use a compress image instead. Note that this code is not cross-browser, check required code on Mozilla Developer Network */
    background-image: -webkit-linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
    background-image: linear-gradient(to right, green 0%, green 33%, #fff 33%, #fff 66%, red 66%, red 100%);
}
.wrapper {
    /* you wrap your main elements so that you don't have to reproduce this style every time */
    width: 90%;
    margin: 0 auto;
    text-align: center;
}
h1 {
    font: arial;
    font-size: 23px;
    color: green;
    padding: 20px 0 75px;
    margin: 0;
}
.images {
    display: inline-block;
    width: 32%;
    /* 100% / 3 images per row */
    background-color: #e3e3e3;
    vertical-align: top;
}
.images figure {
    margin: 0;
}
img {
    width: 100%;
    height: auto;
}
figure figcaption, figure p {
    text-align: left;
}
<header id="pageHeader">
    <nav>
        <ul>
            <li><a href="index.html">Home Page</a></li> 
            <li><a href="html/tables.html">Tables</a></li> 
            <li><a href="html/forms.html">Feedback</a></li> 
            <li><a href="html/text.html">About Us</a></li> 
            <li><a href="html/references.html">References</a></li> 
            <li><a href="html/validation.html">Validation</a></li>
        </ul>
    </nav>
</header>
<section class="main">
    <div class="wrapper">
         <h1>Papa Italiano</h1>

        <div class="images">
            <!-- This div class I have used to put three images using just one piece of css code which reduced the code-->
            <figure>
                <img src="http://lorempixel.com/300/250/food" alt="photo" />
                <figcaption>Food 1</figcaption>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </figure>
        </div>
        <div class="images">
            <figure>
                <img src="http://lorempixel.com/300/250/food" alt="photo" />
                <figcaption>Food 2</figcaption>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </figure>
        </div>
        <div class="images">
            <figure>
                <img src="http://lorempixel.com/300/250/food" alt="photo" />
                <figcaption>Food 3</figcaption>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            </figure>
        </div>
    </div>
</section>