2 divs side-by-side centered on page

Question

I'm trying to get these two divs touching each other side-by-side and centered on the page. I had a solution where they were side-by-side, but they were off centered and it was causing the footer to be in the middle of the page.

The solution I have now fixes the footer issue, but doesn't put them side-by-side. I use W3.CSS as a framework.

 .content { margin: 0 auto; margin-top: 230px; min-width: 100%; } div#slideshow { width: 660px; height: 455px; border: 10px solid #de2a96; } div#info { margin-left: -660px; border: 15px solid #14f20c; background-color: rgba(255, 255, 255, 0.8); padding: 5px; width: 550px; float: right; } .mySlides { width: 638px; height: 435px; } 

 <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css"> <div class="w3-container w3-content w3-row content"> <div id="slideshow" class="w3-col l5"> <div class="w3-content w3-display-container w3-hide-small slideshow"> <img class="mySlides w3-animate-right" src="http://via.placeholder.com/660x440" alt=""> </div> </div> <div id="info" class="abouttxt w3-col l7"> <p class="w3-center w3-margin-top">Thank you for your interest in</p> <h1 class="w3-center title"><strong>Lorem Ipsum!</strong></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus commodo sem eget rutrum sollicitudin. Duis sed aliquet enim. Integer placerat maximus dui quis pulvinar. Ut commodo euismod eros vestibulum tincidunt. Vivamus at lacinia nisi. Donec pellentesque commodo molestie. Sed quis porttitor justo. Nulla id posuere lacus. Mauris sollicitudin odio ac est pellentesque, at commodo ante venenatis.</p> </div> </div> 

Answer 1

If you remove your margin-left and your float from div#info they should position side-by-side.

div#info {
  border: 15px solid #14f20c;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 5px;
  width: 550px;
}

You could also use flexbox on your wrapping #content div like so:

.content {
  display: flex;
  margin: 0 auto;
  margin-top: 230px;
}

If you remove the min-width it will center your items correctly. You can also play around with other flexbox properties to achieve the same effects (see justify-content and flex-direction).

Answer 2

i have add same css and html i hope it your help full

 .content { display: flex; margin: 0 auto; margin-top: 230px; } div#slideshow { width: 660px; height: 455px; border: 10px solid #de2a96; } div#info { border: 15px solid #14f20c; background-color: rgba(255, 255, 255, 0.8); padding: 5px; width: 660px; } .mySlides { width: 638px; height: 435px; } 

 <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css"> <div class="w3-row"> <div id="slideshow" class="w3-col w3-container m6 l5"> <div class="w3-content w3-display-container w3-hide-small slideshow"> <img class="mySlides w3-animate-right" src="http://via.placeholder.com/660x440" alt=""> </div> </div> <div id="info" class="abouttxt w3-col w3-container m6 l5"> <p class="w3-center w3-margin-top">Thank you for your interest in</p> <h1 class="w3-center title"><strong>Lorem Ipsum!</strong></h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus commodo sem eget rutrum sollicitudin. Duis sed aliquet enim. Integer placerat maximus dui quis pulvinar. Ut commodo euismod eros vestibulum tincidunt. Vivamus at lacinia nisi. Donec pellentesque commodo molestie. Sed quis porttitor justo. Nulla id posuere lacus. Mauris sollicitudin odio ac est pellentesque, at commodo ante venenatis.</p> </div> </div>