Jump to content

Recommended Posts

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>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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>

 

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...