CSS: Need boxes at 62% and 38%, but can't seem to find the right formula or code

Question

CSS: Need boxes at 62% and 38%, but can't seem to find the right formula or code

56 views Asked by DrewK At 13 June 2015 at 16:45

Trying to get the left box at 62% of the width to the left and the right box at 38%. Where ever I add the percentages, they still sit at 50%. Any ideas? Thank you for any help/advice you can share.

<!DOCTYPE html>
<html>
<head>
<style>
#sides {
  display: flex;
  padding: 0px 0px;
  background-color: white;
}

.sideleft {
  flex: 1;    
  padding: 20px;
  margin: 0;
}

.sideright {
  flex: 1;    
  padding: 20px;
  margin: 0;
}

#left {
  background-color: #333333;
}

#right {
  background-color: #018DCA;
}

h1 {
  color: #FFFFFF;
}

h2 {
  color: #FFFFFF;
}

</style>
</head>
<body>

<div id="sides">
  <div class="sideleft" id="left" align="right">
    <h1>text</h1>
    <h2>text</h2>
  </div>
  <div class="sideright" id="right">
    <h1>text</h1>
    <h2>text</h2>
  </div>
</div>

</body>
</html>

Original Q&A

There are 3 answers

**Matt Hammond** · Answer 1 · 2015-06-13 16:55:40

You just have to make the left and right side, float left and have display:inline-block here is the css with it working. You also have to set your container div in this case sides to 100%

#sides {
  display: flex;
    width: 100%;
  background-color: white;
    margin: 0px;
}

.sideleft {
  flex: 1;  
     width: 62%;
  margin: 0px;
    display: inline-block;
    float: left;
}

.sideright {
  flex: 1;    
    width: 38%;
  margin: 0px;
    display: inline-block;
    float: left;
}

**maioman** · Answer 2 · 2015-06-13 17:00:33

maioman On 13 June 2015 at 17:00

flex property is the combination of flex-grow: flex-shrink: flex-basis: ,

so to set width you need to set flex-basis:

for ex.: flex: 0 1 38%;

fiddle

**Henry L** · Answer 3 · 2015-06-13 17:47:37

Try this please:

<!DOCTYPE html>
<html>
<head>
<style>
#sides {

  padding: 0px 0px;
  background-color: white;
}

.sideleft {
  flex: 1;    
  padding: 00px;
  margin: 0;
}

.sideright {
  flex: 1;    
  padding: 00px;


}

#left {
  background-color: #333333;
}

#right {
  background-color: #018DCA;
}

h1 {
  color: #FFFFFF;
}

h2 {
  color: #FFFFFF;
}

</style>
</head>
<body>

<div id="sides">
  <div class="sideleft" id="left"  style=" width:62%">
    <h1>text</h1>
    <h2>text</h2>
  </div>
  <div class="sideright" id="right" style=" width:38%; margin-left:62%">
    <h1>text</h1>
    <h2>text</h2>
  </div>
</div>

</body>
</html>

css width box

TechQA.

CSS: Need boxes at 62% and 38%, but can't seem to find the right formula or code

There are 3 answers

Related Questions in CSS

Related Questions in WIDTH

Related Questions in BOX

Popular Questions

Popular Tags

Trending Questions