CODEWITHSUNDEEP
htmlcss
Alan
Alan

Reputation: 1265

CSS and page resizing

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:

  1. When the page is resized horizontally , the right section moves over the left totally obscuring the site menu.

  2. 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.

menu being obscured

.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;
}

Upvotes: 0

Views: 78

Answers (4)

GuCier
GuCier

Reputation: 7405

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>

Upvotes: 1

Ante Guzic
Ante Guzic

Reputation: 11

/* 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;
  }
}

Upvotes: 1

Gunther
Gunther

Reputation: 1328

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.

Upvotes: 2

Yuniac
Yuniac

Reputation: 571

-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

Upvotes: 1

Related Questions