CSS and page resizing

Question

I`m setting up a simple page with a top section and the portion below split into vertical sections.

The left section contains a site menu, the right section holds verbiage and the middle is a space between left and right (not needed?).

My issues:

When the page is resized horizontally , the right section moves over the left totally obscuring the site menu.
Text in the right section wraps over into the left below the site menu. I'd like the text in the right section to stay in the right section.

.top {
  width: auto;
  height: auto;
  padding-bottom: 50px;
  background-color: white;
}


.ileft {
    width: 15%;
    float: left;
    background-color: white;
}

.imiddle {
    width: 5%;
    float: left;
    background-color: white;
}

.iright {
   width: 80%;
   float: left
   margin-left: 30px;
   background-color: white;
}

There are newer CSS tools like flexbox or grid that don't require the use of float. You might be looking for the holy grail layout. — D M
– D M, Commented Feb 26, 2021 at 19:49

Gunther · Accepted Answer · 2021-02-26 20:02:06Z

2

Please do as others said and use either flex or grid to create this layout.

But if you want to go with this setup for some reason, the problem with your code is that you have a missing ; after your float property in the .iright selector and you need to set your width to calc(80% - 30px) so it considers the margin-left property (or just remove the margin-left).

/* Added so you can see the output better */
div {
  height: 40px;
}

.top {
  width: auto;
  height: auto;
  padding-bottom: 50px;
  background-color: red;
}

.ileft {
    width: 15%;
    float: left;
    background-color: blue;
}

.imiddle {
    width: 5%;
    float: left;
    background-color: purple;
}

.iright {
   width: calc(80% - 30px);
   float: left;
   padding: left;
   margin-left: 30px;
   background-color: yellow;
}

<div class="top">Top</div>
<div class="ileft">Left</div>
<div class="imiddle">M</div>
<div class="iright">Right</div>

Please do as others said and use either flex or grid to create this layout.

answered Feb 26, 2021 at 20:02

Gunther

1,3479 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alan Over a year ago

I'll have to research flex/grid. Obviously, I don't even know css. Your css example did everything except stopping a resize from covering the menu. I've added a graphic to my question taken after I applied your edit and after a resize.

Alan Over a year ago

I'm now using Flex. What a great tool! I wish I could award the answer to everyone who mentioned it.

Yuniac · Accepted Answer · 2021-02-26 19:54:35Z

1

-You can use "media queries" to re-adjust your content according to the size of the screen, in whichever way you want including font-size, for example: when it resizes itself to a smaller size using the media queries, the text won't wrap.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

-And you should also check alternative layout methods other than float such as:

https://developer.mozilla.org/en-US/docs/Web/CSS/flex

https://developer.mozilla.org/en-US/docs/Web/CSS/grid

answered Feb 26, 2021 at 19:54

Yuniac

6957 silver badges25 bronze badges

Comments

Ante Guzic · Accepted Answer · 2021-02-26 21:22:12Z

1

/* Column container */
.row {
  display: -ms-flexbox; 
  display: flex;
  -ms-flex-wrap: wrap; 
  flex-wrap: wrap;
}


/* left column */
.side {
  -ms-flex: 20%; 
  flex: 20%;
  background-color:green;
  padding: 20px;
}

/* Main column */
.main {
  -ms-flex: 80%; 
  flex: 80%;
  background-color: blue;
  padding: 20px;
  float: center;
}

@media screen and (max-width: 700px) {
  .row {
    flex-direction: column;
  }
}

answered Feb 26, 2021 at 21:22

Ante Guzic

114 bronze badges

1 Comment

Ante Guzic Over a year ago

You might as well want to use flex and create columns instead. No space in between is needed.

GuCier · Accepted Answer · 2021-02-27 08:24:43Z

1

Here you go. You may want to use a more flexible way to layout the page (flex, grids, ...)

Oh, and you are welcome about those delightful colors.

div {
  height: 100px;
}

.iLikeFlex {
 display: flex
}

header {
  background-color: MediumSlateBlue;
  height: 50px;
}

.ileft {
  /* Fixed width - 150px */
  flex: 0 0 150px;
  background-color: DeepPink;
}

.imiddle {
  /* Fills all remaining space */
  flex: 1;
  /* But you still can limit its min or max size*/
  min-width: 300px;
  background-color: PeachPuff;
}

.iright {
  /* Fixed width - 200px */
  flex: 0 0 200px;
  background-color: tomato;
}

<header></header>

<div class="iLikeFlex">
  <div class="iright"></div>
  <div class="imiddle"></div>
  <div class="ileft"></div>
</div>

edited Feb 27, 2021 at 8:24

answered Feb 26, 2021 at 19:59

GuCier

7,4851 gold badge32 silver badges40 bronze badges

2 Comments

Gunther Over a year ago

How did you got to know about these color names? A good reference sheet you're using or you just knew it by heart?

GuCier Over a year ago

Well, grab a coffee because there is a lot of em. I know a few, but it's not really useful.

Collectives™ on Stack Overflow

CSS and page resizing

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related