Two Divs next to each other with their Items next to each other

user_14018654 0
Viewed 722

I am currently writing a page with React Js. As I am pretty new to Webdevlopement especially CSS and only wrote one page before I am stuck. I have created two divs one left and one right and want to place an image in the left one and a paragraph with a link below on the right one. I want the items to be next to each other in the middle of the page. How do I style this in CSS?

enter image description here

layout css html
2 Answers

If you use Bootstrap Css library, you would get it this way. You can visit How To Include Bootstrap In HTML

<!-- 
  Bootstrap docs: https://getbootstrap.com/docs
-->

<div class="container">
  <div class="row">
    <div class="col-6  bg-dark">
      <img src="https://imgur.com/gallery/CSf68dv"/>
    </div>
    <div class="col-6 bg-info">
     <p>
     Paragrapgh
     </p> 
    </div>
  </div>
</div>

fiddle link here

user_43075340

Here is a custom code solution, without any framework. Easy and quick to customize plus I have included my comments for you to understand each step in the CSS.

.title, .navbar {
  width: 100%;
  height: 100px;
  display: flex;
}

.title {
  background: #000;
  color: #FFF;
  align-items: center;
  justify-content: center;
}

.navbar {
  justify-content: flex-start;
  align-items: center;
  height: 70px!important;
}

.navbar a {                                   /* custom styling of navbar items, as they are links we need to remove the default styling of blue and underlined */
  text-decoration: none!important;
  color: #000!important;
  margin: 0 60px;
}

.navbar a:hover {              /* underline each nav item link on hover basic cool effect */
  text-decoration: underline!important;
}

.wrapper {
  display: flex;
  width: 100%;
}

.box {           /* give the wrapper a width of 100% and each of the 2 equal-width box 50% */
  width: 50%;
  height: 500px;
  display: flex; /* display set to flex to we can automatically align vertically (align-items) and horizontally (justify-content:) */
  align-items: center;
}

.box1 {
  justify-content: flex-end; /* align the content of box one to the END of the flexbox (which is in the middle precisely */
}

.box2 {                          /* same for box2 content but now to the START of the flexbox */
  justify-content: flex-start;
}

.box1 img {         /*style the image size the same as the sub-box that contains the paragraph and the link to page in box2 */ /* that's it! */
  height: 200px;
  width: 50%;
}

.sub-box {
  height: 200px;
  width: 50%;
  display: flex;
  flex-direction: column;
  margin: 15px;
}
<div class="title">Page Title</div>
<div class="navbar">
    <a href="#">Home</a>
    <a href="#">Fun</a>
    <a href="#">Blog</a>
    <a href="#">Something</a>
</div>
<div class="wrapper"> <!-- create a main container div for the 2 boxes -->
    <div class="box box1"> <!-- each of the 2 boxes has a common class called "box" that we will style in tyhe CSS code -->
        <img src="http://dev.laurentchevrette.digital/images/oranges.jpg">
        </div>
        <div class="box box2">
            <div class="sub-box"> <!-- here we create an extra div/box in which we put the paragraph of text and the link to the page to easily style them later -->
                <span>Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Vestibulum ac diam sit amet quam vehicula elementum sed sit amet dui. Donec sollicitudin molestie malesuada. Cras ultricies ligula sed magna dictum porta. Curabitur aliquet quam id dui posuere.</span>
                <a href="#">Link to page</a>
            </div>
        </div>
    </div>

user_111350920
Related