What Is The Best Way To Position These Elements Within A Div?

April 21, 2024 Post a Comment

I'm currently trying to create a structure looking something like this: As you can see this involves a main div (div 1) which is centred with respect to the main body of the page.

Solution 1:

I would go for flex and writing-mode, column height's will adjust themselves.

https://www.w3.org/TR/css3-writing-modes/

.div1 {
  border: solid;
  margin: 1em10%;
  display: flex;
}
.div2 {
  text-align:center;
  width: 3.25em;
  padding: 1em;
  white-space: nowrap;
  background: gray;
  -webkit-writing-mode: vertical-lr;
  /* old Win safari */writing-mode: vertical-rl;
  writing-mode: tb-lr;
  writing-mode:sideways-lr;/* should be the one *//* eventually IF SIDEWAYS NOT ENOUGH IMPLEMENTED 
  transform: scale(-1, -1); */
}
p {
  border-left: solid;
  margin: 0;
  padding:0.5em;
  flex: 1;
}
/* eventually center text in p */p {
  display: flex;
  align-items: center;
  justify-content: center;
}

<divclass="div1"><divclass="div2"><h3class="sidetext">Post #NUM</h3></div><p>The main content (text) for this div is written here</p></div><divclass="div1"><divclass="div2"><h3class="sidetext">Post #NUM</h3></div><p>The main content (text) for this div is written here
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line
    <br/>here comes a line</p></div>

DEMO

Solution 2:

You were actually close to the solution, here's where you've missed:

align:left; should be float:left;
with transform-origin: left bottom 0; you're rotating your headline out of the black div, better to just rotate around the center and translate it to the right position
add white-space: nowrap to ensure the headline is on one line
wrap your content in a div, in case you have more than just one paragraph.

.div1 {
  margin-left: 10%;
  margin-right: 10%;
}
.div2 {
  float: left;
  width: 25px;
  background-color: black;
  min-height: 15em;
}
.sidetext {
  white-space: nowrap;
  color: white;
  transform: rotate(-90deg) translateX(-10em);
}

<divclass="div1"><divclass="div2"><h3class="sidetext">Post #NUM</h3></div><divclass="content"><p>The main content (text) for this div is written here</p></div></div>

What's still left to do: In this example .div2 and .content are not the same height. Also you will have to adjust the numbers for min-height and translateX to your needs.

Solution 3:

You need floats to get the sidetext and the p to sit side by side. Additionally if you apply the rotation to div2 and not the text inside, and remove the transform-origin css it will work:

.div1{
  width:90%;
  margin-left: 10%;
  margin-right: 10%;
}

.div2{
  transform: rotate(270deg);
  background-color: black;
  float: left;
}

.sidetext{
  color: white;
  float: left;
}

p {
  float: left;
}

Solution 4:

Try this

.div1 {
      border: 1px solid #000;
      width: 100%;
      height: 400px;
      text-align: center;
      padding: 25px0;
    }
    .div2 {
      background-color: black;
      display: inline-block;
      color: white;
    }
    p {
      display: inline-block;
    }

<divclass="div1"><divclass="div2"><h3class="sidetext">Post #NUM</h3></div><p>The main content (text) for this div is written here</p></div>

here is the jsfieddle link to check https://jsfiddle.net/ont9sxzx/1/

Solution 5:

Try This: Add float:left; to your sidebar.

.div1 {
  margin-left: 10%;
  margin-right: 10%;
}
.div2 {
  width: 50px;
  float: left;
  background-color: black;
  margin-right: 10px
}
.sidetext {
  color: white;
  float: left;
  transform: rotate(270deg);
  transform-origin: 22px center 0;
}

<divclass="div1"><divclass="div2"><h3class="sidetext">Post #NUM</h3></div><p>The main content (text) for this div is written here</p></div>

You can check here: https://jsfiddle.net/xmmjrspn/

Html5 stackoverflow Examples