Layouting Div Besides A Div Classes With Float And Center

Good day! So far I have used the float functions right and left but somehow I stuck and can't advance. I want to have a center div where there a div floating within the center div

Solution 1:

Personally, I won't use floats for what you will like to approach. Instead I will use display: flex on the wrap element. Example:

#wrap {
  display: flex;
  width: 100%;
}

.wrap-item {
  background-color: #00d;
  height: 123px;	
  text-align: center;
  margin: 2px;
}

.left {
  width: 25%;
}

.center {
  width: 50%;
}

.right {
  width: 25%;
}

<divid="wrap"><divclass="wrap-item left">LEFT</div><divclass="wrap-item center">CENTER</div><divclass="wrap-item right">RIGHT</div></div>

Also, note the usage of percentages on the width to get some sort of responsiveness (adaptive to different screens widths).

Solution 2:

Rather than float, use CSS Flexbox, which makes vertical alignment and other justification much simpler. Then use CSS Transforms to rotate your text.

#wrap{
  width:600px;
  height:150px;
  display:flex;  /* The container will be laid out as a flex box */align-items:stretch; /* Makes the childre use all the height of the parent */
}
#wrap > div {
  background-color: #00d;
  margin:3px;
  text-align:center;
  color:#fff;
  width:25%; 
  display:flex; /* The children can also be laid out as flex box containers  */align-items:center; /* Alignment along the "cross-axis" (vertical here) */justify-content:center; /* Alignment along "main-axis" (horizontal here) */font-size:2em;
}

/* Override the width for just the center item */#wrap > div.center { width:50%; }

.rotate { transform:rotate(45deg);} /* Rotate the element */

<divid="wrap"><div><divclass="rotate">LEFT</div></div><divclass="center">CENTER</div><div><divclass="rotate">RIGHT</div></div></div>