Making screen smaller pushes last box out of its place |
Making screen smaller pushes last box out of its place |
mp3909 |
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; } |
pandy |
Apr 14 2020, 03:02 PM
Post
#2
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 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?
|
mp3909 |
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 |
pandy |
Apr 24 2020, 07:34 AM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 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. |
Lo-Fi Version | Time is now: 28th March 2024 - 08:12 PM |