Help with Float

buza586 · April 20, 2017

I am using the Float page in CSS from this site to teach my coding class and I was wanting students to float their image next to the paragraph and heading in the example below but I can't get it to work.

Every time I have tried to add a picture it will only appear below the paragraph and not next to it. I've tried giving the image a class of "column pic", I've tried giving it it's own division and and floating it to the right, I've put these divisions in multiple places and used multiple css but I can't get it to work. I ended up using the absolute position property to move it to the position I wanted. Any help is appreciated!

This is a link to the Tryit: https://www.w3schools.com/css/tryit.asp?filename=trycss_layout_cols

<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {
width: 25%;
}
.content {
width: 75%;
}
.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.menu li {
padding: 8px;
margin-bottom: 8px;
background-color: #33b5e5;
color: #ffffff;
}
.menu li:hover {
background-color: #0099cc;
}
</style>
</head>
<body>

<div class="header">
<h1>Chania</h1>
</div>

<div class="clearfix">
<div class="column menu">
<ul>
<li>The Flight</li>
<li>The City</li>
<li>The Island</li>
<li>The Food</li>
</ul>
</div>

<div class="column content">
<h1>The City</h1>
<p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
<p>You will learn more about web layout and responsive web pages in a later chapter.</p>
</div>
</div>

<div class="footer">
<p>Footer Text</p>
</div>

</body>
</html>

Ingolme · April 20, 2017

Float puts an element to the left or right of all the content that follows it if that content fits in the remaining space. In this W3Schools example, the menu is 25% width and the content is 75% width. If you tried to add something else, it wouldn't fit because it exceeds 100% of the available width. If you want to add a third column you have to adjust the widths.

A floated element will only appear next to content that follows it and below content that precedes it unless the preceding content is also floated.

I haven't seen your specific code, so I don't know for your particular case why it's not behaving as you intended.

dsonesuk · April 20, 2017

Block elements such as div, h1, p fill the width available to them, any element below them will stack below them, if floated or not. A floated element before a block element/s, will cause the block element to merge within it, and even though the block element still take the full width, the text within them will flow to and around the edges of floated element. #1

If you place img element within the first paragraph, which you can because is a inline element and acts similar to text, It will fall below header h1, the first paragraph text will merge to edge of img element as will the second paragraphs text.

For adding a div element to .content class div for extra column, you need to float and set its width to requirements.#2 and #3

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" />
        <title>Document Title</title>
        <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script  type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
        <script type="text/javascript">

        </script>
        <style type="text/css">
            * {
                box-sizing: border-box;
            }
            .header, .footer {
                background-color: grey;
                color: white;
                padding: 15px;
            }
            .column {
                float: left;
                padding: 15px;
            }
            .clearfix::after {
                content: "";
                clear: both;
                display: table;
            }
            .menu {
                width: 25%;
            }
            .content {
                width: 75%;
            }
            .menu ul {
                list-style-type: none;
                margin: 0;
                padding: 0;
            }
            .menu li {
                padding: 8px;
                margin-bottom: 8px;
                background-color: #33b5e5;
                color: #ffffff;
            }
            .menu li:hover {
                background-color: #0099cc;
            }
            .column.content {float: right;}
            .column.content > img {float: left; max-width: 25%; margin: 0 8px;}
            .column.content > div {max-width: 25%;}
            .column.content > div img {max-width: 100%;}
            .column.content > div.left {float: left; margin: 0 8px; }
            .column.content > div.right {float: right;  }
        </style>
    </head>
    <body>
        <div class="clearfix">
            <div class="column menu">
                <ul>
                    <li>The Flight</li>
                    <li>The City</li>
                    <li>The Island</li>
                    <li>The Food</li>
                </ul>
            </div>

            <div class="column content"><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt="">
                <h1>The City #1</h1>
                <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
                <p>You will learn more about web layout and responsive web pages in a later chapter.</p>
            </div>

            <div class="column content">
                <div class="left"><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt=""></div>
                <h1>The City #2</h1>
                <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
                <p>You will learn more about web layout and responsive web pages in a later chapter.</p>
            </div>
            <div class="column content">
                <div class="right"><img src="https://www.w3schools.com/w3css/img_lights.jpg" alt=""></div>
                <h1>The City #3</h1>
                <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
                <p>You will learn more about web layout and responsive web pages in a later chapter.</p>
            </div>
        </div>

        <div class="footer">
            <p>Footer Text</p>
        </div>
    </body>
</html>

Sign In

Help with Float

Recommended Posts

buza586

Link to comment

Share on other sites

Ingolme

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity