This question already has answers here:
Why does this CSS margin-top style not work?
(14 answers)
Closed 2 years ago.
I am developing a website with the help of HTML and CSS. Here, I have two parts of the page, first one - the menu and second part - rest of content. I am seeing an unwanted space between both parts. I checked the code many times but I could not find any reason for this. I used the developer tools to see what could I do. The margin was 0px. When I reduced the margin to -18 or -19px, then I could see both parts joined.
Also, another problem is there. The paragraph text is going outside the container(as shown in the image).
The code is as below -
body {
margin: 0px;
background-color: #d6d6d6;
color: black;
}
a {
text-decoration: none;
color: black;
}
#top{
width: 100%;
height: 80px;
background-color: white;
position: sticky;
box-shadow: 0 0 5px 0.1px;
}
header img {
padding-left: 20px;
padding-right: 20px;
border-right: 1px solid black;
margin-left: 50px;
float: left;
width: 15%;
height: 80px;
}
nav a {
margin: 81px;
font-size: 40px;
font-family: sans-serif;
color: darkgray;
}
nav {
padding: 20px;
}
#container {
width: 1190px;
background-color: white;
margin: 0 auto;
box-shadow: 0 0 5px 0.1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Day to Dayz Solutions</title>
</head>
<body>
<div id="top">
<header>
<img src="http://placehold.it/400px80">
</header>
<nav>
Home
Our Services
Contact Us
</nav>
</div>
<div id="container">
<article>
<section>
<h1>About Us</h1>
<p>gwserwsethsyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy5454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454544</p>
</section>
</article>
<footer>© <p>2020 | Site Designed and Developed by Praneet Dixit</p></footer>
</div>
</body>
</html>
I know that the contents of the menu could mess up because I am not using flexbox or anything like that. Please ignore that.
The unwanted space you mentioned is coming because of h1 tag you used for about us.
<h1>About Us</h1>
try changing it to:
<span>About Us</span>
and give custom css to it as you like:
span {
padding: 5px;
margin: 5px;
}
For the content to stay within the box apply this property to your p tag
word-break: break-all;
And if you want your boxes to align one after the other, remove margin from your h1 like this:
h1{
margin: 0;
}
There is a margin on <h1> causing the spacing between header and content. Set margin: 0 to h1 will remove the extra spacing. For the second issue, you may use word-break: break-all; to prevent the text-overflow in the container. Please see code snippet for details.
/* Issue 1: extra space between header and content */
h1 {
margin: 0;
}
/* Issue 2: Overflow with long word */
p {
word-break: break-all;
}
body {
margin: 0px;
background-color: #d6d6d6;
color: black;
}
a {
text-decoration: none;
color: black;
}
#top {
width: 100%;
height: 80px;
background-color: white;
position: sticky;
box-shadow: 0 0 5px 0.1px;
}
header img {
padding-left: 20px;
padding-right: 20px;
border-right: 1px solid black;
margin-left: 50px;
float: left;
width: 15%;
height: 80px;
}
nav a {
margin: 81px;
font-size: 40px;
font-family: sans-serif;
color: darkgray;
}
nav {
padding: 20px;
}
#container {
width: 1190px;
background-color: white;
margin: 0 auto;
box-shadow: 0 0 5px 0.1px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home | Day to Dayz Solutions</title>
</head>
<body>
<div id="top">
<header>
<img src="http://placehold.it/400px80">
</header>
<nav>
Home
Our Services
Contact Us
</nav>
</div>
<div id="container">
<article>
<section>
<h1>About Us</h1>
<p>gwserwsethsyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy5454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454545454544</p>
</section>
</article>
<footer>©
<p>2020 | Site Designed and Developed by Praneet Dixit</p>
</footer>
</div>
</body>
</html>
Related
I am trying to make a website and am running into an issue of not being able to remove a chunk of white space.
I am using an image as a background and want the main text and logo to be in the middle of the background image.
I have tried using overflow-x: hidden; as well as messing with margin, padding, width and height values of different elements in the css file but, I cannot get it to work. I tried to set the width and height bigger but it won't expand to any size screen.
I haven't had this issue before and do not know why it is happening now.
My Code:
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
width: 50em;
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
margin-top: .5em;
margin-left: 13.7em;
margin-right: auto;
padding: 0em 0em 0em 0em;
}
#background {
position: absolute;
z-index: -1;
left: -40px;
top: -88px;
width: 100%;
height: 100%;
padding: 0 0 0 0;
margin: 0 auto;
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
width: 40em;
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<img id="logo" src="images/logo.jpg" width="840" height="200" />
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
<img id="background" src="images/background.jpg" />
</html>
This is happening because your background image is outside your <body> tag.
There's better and more maintainable ways of doing what you're trying to do, without all that "hacking".
I'll try to modify a bit of your code and comment it out so you can understand it a bit more.
Using images as a background
When you want to use an image as a background, use it as a CSS background-image Property. There's some occasions it would be better to use the way you were trying to use it, but generally and for this specific case background-image is more suitable.
.myElement {
background-image: url("paper.jpg");
}
If you want your text centralized inside of an element with a background, wrap your content with a new element, insert the content inside of it, and then give to this new element the background-image property.
<div class="newElement">
<div class="content-wrapper">
<h2>Your Title Goes Here</h2>
<p>Your Description Goes Here</p>
</div>
</div>
.newElement{
background-image: url("paper.jpg");
}
All together your code should look something like this:
/* New Code Added */
.newElement {
background-image: url(http://lorempixel.com/400/400/abstract/);
background-repeat: no-repeat; /* Makes background nto repeat */
background-size: cover; /* Sets background size as a cover */
background-color: #cccccc;
padding: 2rem; /* Give the padding here instead of logo to avoid "breadking" the image's 100% width. A lesson for another day */
}
/* Old Code. Check comments */
h1 {
font-family: "times new roman";
font-size: 2.5em;
color: rgb(100, 181, 204);
}
#box {
border-width: 0.25em;
border-style: solid;
border-color: black;
/* width: 50em; No need for this being added */
margin-left: auto;
margin-right: auto;
padding: 1em;
font-family: sans-serif;
color: black;
background: rgb(135, 129, 140);
}
div {
margin: 0 auto;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
p {
font-size: 1.2em;
}
.centertext {
text-align: center;
width: 60%;
margin-left: auto;
margin-right: auto;
}
#logo {
width: 100%;
max-width: 840px; /* Sets a max-width. Same size of the picture's width. So we avoid image losing focus when the screen gets bigger */
height: auto; /* automatically follows the lead of the width, scalling the image equally without distortion */
margin: 0 auto; /* Centers image horizontally */
display: block; /* Needed for the horizontal center */
}
footer {
display: block;
background: rgb(81, 40, 117);
padding: 0.1em;
border-width: thin;
border-style: solid;
border-color: black;
clear: right;
}
#mainnav {
border-width: .1em;
border-style: solid;
border-color: black;
/* width: 40em; No need for this being added */
padding-left: 0em;
margin-left: auto;
margin-right: auto;
text-align: center;
background: rgb(81, 40, 117);
}
#mainnav a:link {
color: white;
}
#mainnav a:visited {
color: blue;
}
#mainnav a:hover {
color: black;
}
#mainnav a:active {
color: light gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title> Christie Matterns Portfolio website</title>
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
<div class="newElement">
<div class="content-wrapper">
<img id="logo" src="http://lorempixel.com/840/200/food/" width="840" height="200" />
</div>
</div>
<div id="box">
<div>
<p id="mainnav">
Home |
Who am I? |
Questionair |
</p>
</div>
<h1 class="centertext">My Portfolio</h1>
<p class="centertext">
Hello, My name is Christie Mattern, I am a web designer!
</p>
<p>
I am based in Fort Wayne, Indiana and this website is my portfolio! I will use it to tell you a bit about me and to show my work progress.
<footer>
<p class="centertext">
Christie Mattern
</p>
</footer>
</div>
</body>
</html>
If you wanted a background image for all the website, just move the
background-image attributes to the body tag instead.
body {
background-image: url("paper.jpg");
}
Removing the width you were adding to the box and mainnav
elements, the content even becomes responsive so it's ready for mobile
devices.
Read more about background-image and its properties.
Not sure if I understood your question a 100%, but if you're trying to get the background image to cover the entire document, try wrapping it around the entire document with a css property.
Example: remove the img tag that you have.
<body id="background">
<!-- rest of your code here -->
</body>
then in the css add background-image to reference your img under the id background :
#background {
background-image: url("images/background.jpg");
}
Ok, so I'm trying to create this div that shows information of the Civilian and Vehicle the user put in. I created the HTML and CSS for it, it was working all fine until I added 2 divs to the mix. With the one div, it looks like
this, with 2 divs, it looks like this. IDK what is happening here, really. When I add a background to everything, there is no white background where the giant gap is from "Information: " and "Civilian: ". To go with that, when I put the width of the 2 divs to %49.99 and set the display to inline-block, it shows up like this. IDK how to explain it, it just goes off of the screen into oblivion. I'm soo sorry if this is basic ass stuff to fix inside of my HTML/CSS, I have minor knowledge of either and I'm just trying to use jQuery to mess around with some stuff in there (basically edit the text). Here is my HTML/CSS code:
HTML:
<div id="civinfo">
<h1>Information</h1>
<!-- CIV SIDE -->
<div>
<h2>Civilian: </h2>
<span><h3>Name: </h3><p id="civname">None, None</p></span>
<span><h3>Warrant: </h3><p id="civwarrant">None</p></span>
<span><h3>Citations: </h3><p id="civcit">None</p></span>
</div>
<!-- VEH SIDE -->
<div>
<h2>Vehicle: </h2>
<span><h3>Plate: </h3><p id="vehplate">None</p></span>
<span><h3>Stolen: </h3><p id="vehstolen">None</p></span>
<span><h3>Registered: </h3><p id="vehregi">None</p></span>
<span><h3>Insured: </h3><p id="vehinsured">None</p></span>
</div>
</div>
CSS:
#civinfo {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
background: #000000;
width: 35%;
height: 30%;
display: none;
font-family: 'Lato', sans-serif;
color: white;
border-radius: 10px;
}
#civinfo h1 {
text-align: center;
font-size: 35px;
margin: 8px;
}
#civinfo div {
margin: 0;
padding: 0;
display: inline-block !important;
width: 45%;
height: auto !important;
}
#civinfo div h2 {
text-align: center;
margin: 0 5px;
font-weight: 400;
font-size: 20px;
}
#civinfo div h3 {
display: inherit;
font-weight: 400;
margin: 0 10px;
}
#civinfo div span {
display: inline-block;
margin: 0;
padding: 0;
margin-bottom: 5px;
width: 75%;
height: auto;
}
#civinfo div p {
float: center;
text-align: center;
display: inherit;
padding: 5px 15px;
background: #bbbbbb;
color: black;
border-radius: 25px;
font-size: 16px;
}
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
.content-wrapper{
display:flex;
}
.content-wrapper > div{
width:50%;
}
.content-wrapper > div > span{
display:flex;
}
h1{
display:block;
}
</style>
</head>
<body>
<div id="civinfo">
<h1>Information</h1>
<div class="content-wrapper">
<!-- CIV SIDE -->
<div>
<h2>Civilian: </h2>
<span><h3>Name: </h3><p id="civname">None, None</p></span>
<span><h3>Warrant: </h3><p id="civwarrant">None</p></span>
<span><h3>Citations: </h3><p id="civcit">None</p></span>
</div>
<!-- VEH SIDE -->
<div>
<h2>Vehicle: </h2>
<span><h3>Plate: </h3><p id="vehplate">None</p></span>
<span><h3>Stolen: </h3><p id="vehstolen">None</p></span>
<span><h3>Registered: </h3><p id="vehregi">None</p></span>
<span><h3>Insured: </h3><p id="vehinsured">None</p></span>
</div>
</div>
</div>
</body>
</html>
Hi just wrap both civilian and vechicle div into one div and display it as flex.Try above code.Some css modification is done.
I am trying to create a 3 column webpage. My bullets for the unordered and ordered lists are not aligning with the corresponding text in the column. Also, for my middle column the text is scrunched together. How do I space the paragraphs apart?
* {
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body {
background-color: #6B6A67;
}
#container {
width: 920px;
background-color: white;
padding: 10px;
margin-left: auto;
/*will center your page*/
margin-right: auto;
/*will center your page*/
}
h1,
h2 {
text-align: center;
}
li {
text-align: center;
padding: 5px;
}
h4 {
padding: 5px;
text-align: center;
}
/*To style an ID within an ID under it use the parent ID--start with header then call the ID you want to select*/
#container #header {
height: 80px;
background-color: #ADA9A0;
padding-top: 20px;
padding-left: 10px;
padding-right: 20px;
margin-bottom: 5px;
/*To add empty space to bottom of the element*/
}
#container #navigation {
margin-top: 5px;
background-color: #ADA9A0;
color: white;
padding-top: 5px;
padding-bottom: 5px;
border: 2px solid #ADA9A0;
}
#container #content {
background-color: #D9D5CE;
min-height: 300px;
margin-top: 5px;
margin-bottom: 5px;
/*To add empty space to bottom of the element*/
}
#container #content #sidebar1 {
background-color: #ADA9A0;
float: left;
width: 25%;
min-height: 300px;
margin-bottom: 3px;
}
#container #content #column1 {
background-color: white;
min-height: 300px;
margin-bottom: 3px;
width: 50%;
float: left;
margin: 0;
}
#container #content #sidebar2 {
background-color: #ADA9A0;
float: right;
width: 25%;
min-height: 300px;
margin-bottom: 3px;
}
#container #footer {
padding-top: 1px;
border-top: 1px solid black;
}
.CR {
text-align: left;
position: fixed;
}
.Instructor h4 {
text-align: right;
position: fixed right;
}
/*NAV LINKS - add an "a" to style items under the ID'S*/
#container #navigation a {
color: white;
text-decoration: none;
/*gets rid of the underlining effect*/
padding-top: 5px;
padding-bottom: 6px;
padding-left: 10px;
padding-right: 10px;
}
/*To add a hover put a:hover*/
#container #navigation a:hover {
color: red;
background-color: white;
}
#container #content #left {
font-family: Arial;
}
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="HTML.CSS.css" />
<title>My Portfolio</title>
</head>
<body>
<div id="container">
<div id="header">
<h1> CIS 2336- Internet Applications </h1>
<h2> DeVoll </h2>
</div>
<div id="navigation">
Home
HTML/CSS
PHP
</div>
<div id="content">
<div id="sidebar1">
<h4> Instuctor: Natalia Fofanova </h4>
<ul>
<li>Lectures</li>
<li>Syllabus</li>
<li>Helpful Videos</li>
</ul>
</div>
<div id="column1">
<h2> HTML and CSS </h2>
<p>HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for bulding a website.
<p>
<p>HTML provides a structure for the page by using "Hypertext" which refers to the hyperlinks that an HTML page may contain. Also, "Markup language" refers to the way tags are used to define the page layout and elements within the page.</p>
<p>CSS provides the visual layout of web pages. They can be used to define text styles, table sizes, and other aspects of Web pages that previously could only be defined in a page's HTML. CSS helps Web developers create a uniform look across
several pages of a Web site. Instead of defining the style of each table and each block of text within a page's HTML, commonly used styles need to be defined only once in a CSS document.</p>
</p>
</div>
<div id="sidebar2">
<h4> Homework and Projects </h4>
<ul>
<li>Module 1</li>
<li>Module 2</li>
<li>Module 3</li>
<li>Welcome Button</li>
<li>2-column Webpage</li>
</ul>
</div>
</div>
<footer>
<div id="footer">
<div class="CR">
<h4> Copyright 2016 </h4>
</div>
<div class="Instructor">
<h4>Copyright Natalie Fofanova </h4>
</div>
</footer>
</body>
</html>
Declare a line-height to the 2nd section.
Example
#second p {
line-height: 20px;
}
http://www.w3schools.com/cssref/pr_dim_line-height.asp
p{
text-align: justify;
text-align-last: left;
padding-left: 10px;
padding-right: 10px;
}
Add this to your CSS hope it will work
As your code should change like the below code:
#content ul{
margin:0;
padding:0;
display:block;
}
#content ul li {
text-align: center;
padding: 0px;
list-style-type:none;/* if you really wants bullets remove this line*/
}
* {
font-family: Melvetica;
margin: 0px;
padding: 0px;
}
body {
background-color: #6B6A67;
line-height:20px;
}
#column1 p{padding:4px;}
.clearfix{clear:both;}
To change your min-height should be min-height: 320px; instead of 300px.
You want to more clarity in this question. please tell me we will suggest some more points.
i will update your code jsfiddle.
Demo
p{
padding: 0 0 10px 0;
}
just padding down would make sure space between all paragraph
I'm following an exercise on Pluralsight, but I'm struggling with a part which appears to work on the video, but doesn't with my code.
I've played around with the CSS and tried it in MS Edge and Google Chrome, but the behaviour is the same, so I must be missing something.
I've added a green border in the #wrapper to highlight the problem. There is still a red border above the "The World" header.
Here is the html5 code (super basic btw!):
body {
font-family: sans-serif;
font-size: 14px;
margin: 0;
background-color: red;
}
label {
font-weight: bold;
display: block;
}
input {
width: 150px;
}
/*css selector*/
input[type=text], input[type=password], textarea {
width: 150px;
}
input[type=submit] {
width: auto;
}
#main {
background-color: #e9e9e9;
margin: 0;
}
#footer {
background-color: #222;
color: #eee;
padding: 8px 5px;
position: fixed;
bottom: 0;
width: 100%;
}
.headshot {
max-width: 50px;
border: 1px solid #222;
padding: 3px;
}
.menu {
font-size: 12px;
}
.menu li {
list-style-type: none;
}
.menu li.activeitem {
font-weight: bold;
}
#sidebar {
background-color: #2a2c36;
color: #eee;
position: fixed;
height: 100%;
width: 250px;
overflow: hidden;
left: 0;
}
#wrapper {
margin-left: 250px;
border: 4px solid green;
}
<!DOCTYPE html>
<html>
<head>
<title>The World</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/site.css" type="text/css" />
</head>
<body>
<div id="sidebar">
<img src="Images/User1.jpg" alt="headshot"
class="headshot" />
<span>Joe Soap</span>
<ul class="menu">
<li class="activeitem">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div id="wrapper">
<div id="main">
<h2>The World</h2>
<p>This will be a fun website soon.</p>
<form>
<div>
<label>Date</label>
<input />
</div>
<div>
<label>Location:</label>
<input />
</div>
<div>
<input type="submit" value="Add" />
</div>
</form>
</div>
<div id="footer">
© 2015 The World Ltd
</div>
</div>
</body>
</html>
Any insights on how to resolve this problem would be great? Also, while a smaller issue, but is it me or does the main body appears to be 1 or 2 pixels higher than the sidebar?
Thanks
UPDATE-1:
I've resolved the problem but I don't understand why that's solving it.
In the #main definition, if I set the padding to 1px it removes the gap above the 'The World' header. If it is set to 0, it is visible. If it is to 4, it removes it, but I can see the content is being pushed further in.
#main {
background-color: #e9e9e9;
margin: 0;
padding:1px;
}
So can someone explain to me why I have to set this to 1px in order to remove this gap and why is it that when I set to 0, it displays it?
Thanks.
Thierry
Add a CSS rule for <h2> with margin:0 or margin-top:0. This overcomes the default browser settings for the element.
The h2 tag gets the style "-webkit-margin-before: 83em" automatically from the browser. You have to reset it explicitly:
-webkit-margin-before: 0
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>
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!
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
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>
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>
![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>