-1

I'm trying to implement new layout on my website and I wonder what would be the best and easiest way to setup it. I want it to look like this:

enter image description here

I've got a main div with text on the middle and two extra divs with text / icons on the opposite sides. However I know they won't have the exact amount of text and would want: 1. Those divs to be equal size 2. And text in both of them centered horizontally and vertically

I've got this html code, since I figured I should keep my sideboxes in a container.

<section class="about">

<div class="about-mainbox">
    <h1>UUUH SCARY</h1>
    <p>Killer mental psychotic sliced. Eyeball cat silent, morbid in damp torture, 666 at brains. Gore at chainsaw knife crazed choking helpless. Bloodcurdling decomposed zombie in virus scared cat Michael Myers worms. Shriek terror shadow, darknes.
    <p>In tense ac, Motionless drowning Full moon. Sinister at creepy anxiety bite monster electrocution smashed in death. Suicide Slash demo.
    <p>At convulsing darkness a evil pain burn. Pain needles commodo drool rabid nightmare. Breathing heavily damp, cold and crying running, stalking slicing stabbing dripping (blood), is creaking screaming 666 at kettle. Worms with guts ect. Graves slice ominous is guns exorcism guts. Breathing heavily damp, cold and crying running.</p> 
</div>

<div class="sidebox-container">

    <div class="about-sidebox-l">
        <p>Stalking slicing stabbing dripping (blood), is creaking screaming 666 at kettle. Eyeball cat silent, morbid in damp torture, 666 at brains. Creep cold graves, shadow non fear a, psychotic ashes ghost. Cat at decapitated guns. Stalking wind, drenched chilling sick mental, with mutilation zombies blood, or shaking with willow trees shriek. Demons in fallen angel non terror decomposed rotten teeth. In horrifying.</p>
    </div>

    <div class="about-sidebox-r">
        <p>Fear is gnarled murder, ominous eerie Serial killer sinister, with sick chilling agony shaking heart pumping. Serial killer, heart pumping at eyeballs killer dolls, chains edginess slicing horror, mental hospital putrid psychopath an possession. Gore at chainsaw knife crazed choking helpless. Breathin.</p>
    </div>
</div>

I would be grateful for help and ideas.

BigPaws
  • 109
  • 1
  • 11
  • 1
    Possible duplicate of [HTML/CSS: Making two floating divs the same height](https://stackoverflow.com/questions/1205159/html-css-making-two-floating-divs-the-same-height) – Shanil Fernando Jul 03 '17 at 13:10
  • Uhm, where to start... first, you are showing us HTML, but no CSS. Make that a Stack Snippet if possible. Second, why use `div` when HTML5 has to offer `main`, `aside` and [many more](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)? Third, use [*Flexbox*](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox), it makes this kind of layout a breeze to set up. – domsson Jul 03 '17 at 13:10
  • [Here](http://the-echoplex.net/flexyboxes/?fixed-height=on&display=flex&flex-direction=row&flex-wrap=nowrap&justify-content=center&align-items=stretch&align-content=stretch&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=0&flex-basis%5B%5D=15%25&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=1&flex-shrink%5B%5D=1&flex-basis%5B%5D=auto&align-self%5B%5D=auto&order%5B%5D=0&flex-grow%5B%5D=0&flex-shrink%5B%5D=0&flex-basis%5B%5D=15%25&align-self%5B%5D=auto) is a start for you. – domsson Jul 03 '17 at 13:11
  • And which of those elements should go where? – David Thomas Jul 03 '17 at 13:28

3 Answers3

2

A flex approach (some adjustments made to your HTML):

.about {
  display: flex;
}

.about-sidebox {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.about-mainbox {
  flex: 2;
}
<section class="about">
  <div class="about-sidebox">
    <p>Stalking slicing stabbing dripping (blood), is creaking screaming 666 at kettle. Eyeball cat silent, morbid in damp torture, 666 at brains. Creep cold graves, shadow non fear a, psychotic ashes ghost. Cat at decapitated guns. Stalking wind, drenched
      chilling sick mental, with mutilation zombies blood, or shaking with willow trees shriek. Demons in fallen angel non terror decomposed rotten teeth. In horrifying.</p>
  </div>
  <div class="about-mainbox">
    <h1>UUUH SCARY</h1>
    <p>Killer mental psychotic sliced. Eyeball cat silent, morbid in damp torture, 666 at brains. Gore at chainsaw knife crazed choking helpless. Bloodcurdling decomposed zombie in virus scared cat Michael Myers worms. Shriek terror shadow, darknes.
      <p>In tense ac, Motionless drowning Full moon. Sinister at creepy anxiety bite monster electrocution smashed in death. Suicide Slash demo.
        <p>At convulsing darkness a evil pain burn. Pain needles commodo drool rabid nightmare. Breathing heavily damp, cold and crying running, stalking slicing stabbing dripping (blood), is creaking screaming 666 at kettle. Worms with guts ect. Graves
          slice ominous is guns exorcism guts. Breathing heavily damp, cold and crying running.</p>
  </div>



  <div class="about-sidebox">
    <p>Fear is gnarled murder, ominous eerie Serial killer sinister, with sick chilling agony shaking heart pumping. Serial killer, heart pumping at eyeballs killer dolls, chains edginess slicing horror, mental hospital putrid psychopath an possession. Gore
      at chainsaw knife crazed choking helpless. Breathin.</p>
  </div>
sol
  • 22,311
  • 6
  • 42
  • 59
  • My PC just crashed so cant test it, but it makes sense, going to try it out as soon as I can, thanks! – BigPaws Jul 03 '17 at 13:45
1

You can use flexbox to structure the three columns. JSFiddle

.content{
  display: flex;
  justify-content: space-around;
  box-sizing: border-box;
  width: 100%;
  
}

.box{
  border: 1px solid black;
  box-sizing: border-box;
}
.box p{
  padding: 20px;
}
.main-content{
  box-sizing: border-box;
}
.main-content h1{
  text-align: center;
}
.main-content img{
  display:block;
  margin: 0 auto;
  border-radius: 50%;
}
.main-content p{
  font-weight: bold;
  padding: 20px;
}
<div class="content">
  <div class="box">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga iusto repellat placeat omnis minima incidunt ipsam. Blanditiis, tempore, officia? Quibusdam libero aliquid, hic in ratione similique magnam numquam voluptates rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos iusto unde temporibus nam, vero architecto, aut excepturi nisi perferendis hic mollitia a nostrum iure eaque ipsam! Alias, magnam, repellat. Maiores.</p>
  </div>
  <div class="main-content">
    <h1>main content</h1>
    <img src="https://placehold.it/100x100" alt="">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima quidem totam velit quis ipsa, repellat soluta? Libero placeat quod, magni distinctio natus, labore voluptate quos voluptatem minus commodi, rerum voluptas!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, quae dolor deserunt! Iure quidem nihil amet illum cupiditate magnam dolore harum sapiente recusandae est, unde. Tempora reiciendis suscipit aliquam quidem.</p>
  </div>
  <div class="box">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga iusto repellat placeat omnis minima incidunt ipsam. Blanditiis, tempore, officia? Quibusdam libero aliquid, hic in ratione similique magnam numquam voluptates rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos iusto unde temporibus nam, vero architecto, aut excepturi nisi perferendis hic mollitia a nostrum iure eaque ipsam! Alias, magnam, repellat. Maiores.</p>
  </div>
</div>
Julian Espinosa
  • 722
  • 6
  • 13
0

Float one div to the left and float the other to the right. And remember you might have to clear the floats after words.

Do this make 1 div with an id or class and second div the same thing just a different id or class to keep things smooth.

#div1{
  float: right;
}

#div2{
  float: left;
}
<div id="div1">1</div>
<div id="div2">2</div>
rocambille
  • 15,398
  • 12
  • 50
  • 68
Jonathan Vasiliou
  • 142
  • 1
  • 12