The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Making screen smaller pushes last box out of its place
mp3909
post Apr 14 2020, 02:22 PM
Post #1


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264



Why does my third box pop out of its place when I minimize my browser (i.e. when I pull the right vertical side of my browser towards the left).

HTML code:
CODE
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title></title>
    </head>
    <body>
        <div class="wrapper">

            <div class="service">
                <h2>Service 1</h2>
                <p>This is service 1</p>
            </div>

            <div class="service">
                <h2>Service 2</h2>
                <p>This is service 2</p>
            </div>

            <div class="service">
                <h2>Service 3</h2>
                <p>This is service 3</p>
            </div>
        </div>
    </body>
</html>



CSS code:
CODE
.wrapper {
    background: lightgrey;
    width: 70%;
    height: 160px;
    margin: auto;
}

.service h2, .service p {
    text-align: center;
    margin: 0;
    padding: 10px;
    border: 0;
}

.service {
    margin: 15px 5px;
    background: white;
    width: 20%;
    float: left;
    padding: 20px;
}


User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 14 2020, 03:02 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,874
Joined: 9-August 06
Member No.: 6



Because the boxes are floated and that's what floats do. What do you want to happen when there isn't room for all three in a row?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mp3909
post Apr 14 2020, 03:37 PM
Post #3


Novice
**

Group: Members
Posts: 20
Joined: 4-April 20
Member No.: 27,264



I thought the boxes will stay on the same row and will shrink proportionally as the browser shrinks.
So how do you overcome this?

This post has been edited by mp3909: Apr 14 2020, 03:39 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 24 2020, 07:34 AM
Post #4


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,874
Joined: 9-August 06
Member No.: 6



Sorry, I hadn't seen your followup question.

The best would be some other strategy than floats. You could for instance make .service 'display: inline-block' and use 'white-space: nowrap' with .wrapper. You will get overflowing text when the screen gets to small though (because of the percental widths). Or make .wrapper 'position: relative' and then position the service boxes absolute within .wrapper . Then you'll get a problem with overlapping boxes (again because of percental widths).

The fix for both problems would be to give .wrapper a min-width in pixels. Then you will of course get sideways scrolling. Don't know how it fares on a phone.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 2nd July 2020 - 08:12 AM