Place 2 Boxes [div's] side by side - html

Question

I want to place the two boxes at the bottom of link, the both article-boxes (div.content), side by side like you see, but without the big distance between them. How to fix this?
Here is relevant code :
div.content {
text-align: justify;
color: #939393;
padding: 25px 90px;
margin: 0px auto 45px;
width: 960px;
border: 2px solid #F27F0E;
}
<div class="content-small" style="float: left;">
<h2></h2>
<ol class="posts"></ol>
</div>
<div class="content-small" style="float: right;">
<h2></h2>
<ol class="posts"></ol>
</div>

Answer 1

Using inline styles (putting the style tag inside of the element) is never a good thing, it's best practice to keep everything in a separate stylesheet and a lot more practical too.
In regards to your question you pretty much have the code already in your stylesheet, just remove the inline styles and put the both divs inside of a parent div.
HTML:
<div class="content-bottom">
<div class="content-small"></div>
<div class="content-small"></div>
</div>
Now we just need to add a little css to center everything with your current layout.
CSS:
.content-bottom {
margin: 0 auto;
width: 1144px;
}
You're probably going to want to adjust the widths and margins for the content-small classes now to your preference.
Hope this helps!

Answer 2

You need to apply float left to both boxes and set your margin-right to appropriate value.
delete style from this :
<div class="content-small" style="float: left;"></div>
<div class="content-small" style="float: right;"></div>
so that they become :
<div class="content-small"></div>
<div class="content-small"></div>
and then change your css like this:
div.content-small {
text-align: justify;
color: #939393;
padding: 25px 50px;
margin: 0px auto 45px;
width: 450px;
border: 2px solid #F27F0E;
float:left; /* add this */
margin-right:40px; /* add this and change value acc */
}
You can also try placing margin on each box separately to achieve your desired result

Answer 3

How about adding an enclosing div around the two article boxes like below. Setting its width to 1144px matches with the total width of the content boxes above.
<div style="width: 1144px; margin: 0 auto 0 auto">
<div class="content-small" style="float: left;">
...
</div>
<div class="content-small" style="float: right;">
...
</div>
</div>

Answer 4

create a wrapper for these 2 div
<div class="wrapper-new" style="margin:0 auto; width:...px;">
<div class="content-small" style="float: left;">...</div>
<div class="content-small" style="float: right;">...</div>
</div>

Answer 5

![enter image description here][1]
This is how you need to do it. The bottom two article boxes should be inside a div with fixed width 1144px and both content-small should be float:left, 2nd one with a margin-left:36px;
That's it! Run the code snippet in Full page and you can see your desired result.
NB: I've removed jQuery from the snippet. If you find my answer useful please mark it as accepted. Thanks! :)
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #fff;
background: #1A1A1A;
}
div.content {
text-align: justify;
color: #939393;
padding: 25px 90px;
margin: 0 auto 45px auto;
width: 960px;
border: 2px solid #F27F0E;
}
div.bottom-content {
padding: 25px 0;
margin: 0 auto 45px auto;
width: 1144px;
}
div.content-small {
text-align: justify;
color: #939393;
padding: 25px 50px;
margin: 0;
width: 450px;
border: 2px solid #F27F0E;
}
a {
text-decoration: none;
color: #6B6B6B;
}
a:hover {
border-bottom: 1px dotted #F27F0E;
}
dt {
font-weight: bold;
display: block;
float: left;
width: 150px;
color: #bbb;
}
img {
border: 1px solid rgba(51, 51, 51, 0.1);
}
div.date {
width: 100px;
padding-bottom: 14px;
margin-left: -120px;
float: left;
}
div.date p {
padding: 5px 10px;
margin-bottom: 0;
text-align: right;
font-family: Arial, sans-serif;
}
div.center {
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
margin: 0 auto 45px auto;
}
.icon {
display: inline-block;
height: 64px;
width: 64px;
text-indent: -9999em;
margin: 0 1em;
}
#github {
background-color: #4183c4;
background-image: url(http://tekkkz.com/css/github.png);
}
#twitter {
background-color: #00aced;
background-image: url(http://tekkkz.com/css/twitter.png);
}
.posts,
.posts li {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}
.posts li {
margin-bottom: 1em;
}
.title {
font-size: 1.2em;
}
.date {
font-style: italic;
font-size: 0.8em;
color: #bbb;
}
h1 {
font-family: Arial, sans-serif;
font-size: 3em;
font-weight: bold;
text-align: center;
color: #fff;
}
h2,
h3 {
font-family: Arial, sans-serif;
font-weight: bold;
margin: 10px 0;
color: #fff;
}
footer {
text-align: center;
font-size: 0.9em;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="author" content="Martin Fischer">
<meta name="description" content="Personal Profile of Tekkkz (Martin Fischer)">
<meta name="keywords" content="pc, personal, profile, web, tekkkz, microcontroller, programming, gaming, avr, atml, s4, s4league, aeriagames, english, german">
<meta name="robots" content="FOLLOW,INDEX">
<title>Tekkkz - Personal Profile</title>
</head>
<body>
<header>
<h1>Tekkkz (Martin Fischer)</h1>
</header>
<div class="center">
Twitter
GitHub
</div>
<div class="content">
<h2>ABOUT</h2>
<dl>
<dt><img src="http://tekkkz.com/css/profile.jpg" alt="profile" height="135em" /></dt>
<dd>
<p>I am Martin Fischer, otherwise known online as Tekkkz. I am 17 years old and currently a student at the 'Winckelmann Gymnasium Stendal'.</p>
<p>My educational interests include mathematics and science, especially physics and chemistry. My extracurricular interests include everything that has to do with electronics, from simple soldering up to programming microcontrollers and develop complex
PCB's, general programming in C and C++ as well as linux and servers.</p>
<p>See my CV.</p>
</dd>
<dl>
</div>
<div class="content">
<h2>CONTACT</h2>
<dl>
<dt>Email</dt>
<dd>martin#Tekkkz.com</dd>
<dt>IRC</dt>
<dd>Tekkkz on Freenode</dd>
<dt>ICQ</dt>
<dd>ICQ Number: 612184097</dd>
</dl>
</div>
<div class="bottom-content">
<div class="content-small" style="float: left;">
<h2>ARTICLES</h2>
<ol class="posts">
<li>
“EUzebox with ATmega1284”
<span class="date">—February 06, 2015</span>
<br />
<span class="description">Instruction set to build an EUzebox with an ATmega1284</span>
</li>
</ol>
</div>
<div class="content-small" style="float: left; margin-left:36px;">
<h2>ARTICLES</h2>
<ol class="posts">
<li>
“EUzebox with ATmega1284”
<span class="date">—February 06, 2015</span>
<br />
<span class="description">Instruction set to build an EUzebox with an ATmega1284</span>
</li>
</ol>
</div>
</div>
</body>
</html>