This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 12 months ago.
I can't seem to get rid of the slight margin/padding that is on my entire site (currently working on a codecademy assignment).
I've looked through the entire document for any margins that I made have acccidentally added or padding settings, but I can't seem to find it anywhere. What is causing the white space on the sides of the website?
Here is the CSS and HTML for my website:
/* Universal Styles */
html {
font-family: "Roboto", sans-serif;
font-size: 16px;
}
body {
border-style: border-box;
}
ul {
list-style-type: none;
}
a {
text-decoration: none;
color: #4A4A4A;
}
.content {
padding: 0;
margin: 0;
}
header .content {
display: flex;
margin: 0 0;
justify-content: space-between;
align-items: center;
height: 85px;
}
.desktop {
}
.desktop ul {
display: flex;
}
.desktop li a {
margin: auto 25px;
display: flex;
align-items: center;
}
.desktop img {
height: 20px;
width: 20px;
}
.mobile {
display: none;
}
#sign-up-section {
background-image: url("banner-landingpage.jpg");
color: white;
}
#sign-up-section .content.center {
background-color: #9DC20A;
margin-top: 170px;
margin-bottom: 170px;
margin-left: 100px;
}
#sign-up-section .cursive {
font-family: Damion, curisve;
font-weight: 50;
font-size: 3em;
}
#sign-up-section .striking {
color: white;
font-size: 50px;
font-family: 'Rubik-Regular', sans-serif;
line-height: 1.4;
}
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=Damion" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600,700" rel="stylesheet">
<link rel="stylesheet" href="./resources/css/style.css">
<meta charset="UTF-8">
</head>
<body>
<!-- Header -->
<header>
<div class="content">
Fotomatic
<nav class="desktop">
<ul>
<li>Product detail</li>
<li>About us</li>
<li>Follow us <img class="icon" src="./resources/images/instagram.png"></li>
</ul>
</nav>
<nav class="mobile">
<ul>
<li><img src="./resources/images/ic-logo.svg"></li>
<li><img src="./resources/images/ic-product-detail.svg"></li>
<li><img src="./resources/images/ic-about-us.svg"></li>
<li>Join us</li>
</ul>
</nav>
</div>
</header>
<!-- Main Content -->
<div class="main-content">
<!-- Sign Up Section -->
<div id="sign-up-section" class="banner">
<div id="sign-up-cta">
<div class="content center">
<div class="header">
<h2 class="cursive">Instant</h2>
<h1 class="striking">FORMAT CAMERA</h1>
</div>
<div class="email">
<span>
Email us to request a demo and be in our waiting list for the <strong>Febuary 2017</strong> release!
</span>
<div class="button">Join the waiting list</div>
</div>
</div>
</div>
</div>
<!-- Features Section -->
<div id="features-section">
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./resources/images/feature-1.png" />
</div>
<div class="./resources/content">
<h2>Advanced, automatic, instant</h2>
<h3>Shutter speed, apperture and flash output adjust automatically</h3>
</div>
</div>
</div>
<div class="feature">
<div class="center">
<div class="image-container">
<img src="./resources/images/feature-2.png" />
</div>
<div class="content">
<h2>Beautifully crafted inside-out</h2>
<h3>From the paint outside to the tiny screw inside, Fotomatic is crafted with love and 20-year of expertise</h3>
</div>
</div>
</div>
</div>
<!-- Filters Section -->
<div id="filters-section">
<div class="content center">
<h2>Over 20+ filters to choose from</h2>
<h3>Feed your creativity with 20 different filter designed by our eclectic in-house photographers!</h3>
</div>
<div class="images-container">
<div class="image-container">
<img src="./resources/images/filter-1.png" />
</div>
<div class="image-container">
<img src="./resources/images/filter-2.png" />
</div>
<div class="image-container">
<img src="./resources/images/filter-3.png" />
</div>
<div class="image-container extra">
<img src="./resources/images/filter-4.png" />
</div>
</div>
</div>
<!-- Quotes Section
<div id="quotes-section">
<div class="content center">
<span class="quote">“It’s truly something that could create a brand new photography Renaissance”</span>
<img class="quote-citation" src="./resources/images/photography-logo.png" />
</div>
</div>
<!-- Footer -->
<footer>
<div class="content">
<span class="copyright">© 2016 Fotomatic, All Rights Reserved</span>
<span class="location">Designed in NYC</span>
</div>
</footer>
</div>
</body>
</html>
Please add following code in css style, may help you:
* {
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
}
By default browsers add styles on some HTML elements, for example on the body. To avoid headaches, and control everything, you would wanna reset them. Also you would wanna set box-sizing: border-box; on all your items, it makes styling much easier.
/* add those lines at the top of your css file: */
*,::after,::before{
margin:0;
padding:0;
box-sizing:border-box;
}
you should all this at the start of ur css code
*,
*::before,
*::after{
box-sizing: border-box;
margin: 0;
padding: 0;
scroll-behavior: smooth; // this is optional but I prefer it for better user experience
}
You can go around this by hard coding the margin and padding settings for the whole body:
body {
display: block;
box-sizing: border-box;
margin: 0;
padding: 0;
}
This is good practice for all CSS style sheets to add at the start.
In your original body class, you set an invalid attribute:
border-style: border-box;
Related
How do I create the horizontal collage and with the same space in between pictures (shown in the picture below) using html5 and css3?
I am very new into both StackOverflow, HTML5 and CSS3 so I do apologize if this post is a bit messy. And I hope you can help my anyway.
This is how i want the final design to look.
Here is my code so far:
h1 {
font-family: 'Brother 1816 Bold', Arial, Helvetica, sans-serif;;
font-size: 2rem;
font-weight: bold;
color: #a71b1a;
}
h2 {
font-family: 'Brother 1816 Bold Italic', Arial, Helvetica,
sans-serif;;
font-size: 1.5rem;
font-weight: bold;
color: #000;
}
.collage_index_1 {
align-content: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://use.typekit.net/tck7grc.css">
<title>Freya Photos - Index</title>
</head>
<body>
<main>
<header>
<!-- all the code related to the header here -->
</header>
<h1> <center>WELCOME TO FREYAS PHOTOS!</center></h1>
<h2> <center>We are where you are, helping you capture the moments of life.</center></h2>
<!-- I cannot align these three images here: -->
<div class="collage_index_group">
<div class="collage_index_1">
<img src="img/optimized images/adorable-20374_1920_250x250.png" alt="Image in black and white of a very young child laying on his stomach underneath a white towel.">
</div>
<div class="collage_index_2">
<img src="img/optimized images/bride-1867228_1920._250x250png.png" alt="A summer picture of a woman and a man standing amongst very high reed and kissing eachother passionately">
</div>
<div class="collage_index_3">
<img src="img/optimized images/smile-2072908_1920_250x250.png" alt="A portrait of a young woman holding an apple in her right hand, close to the face while looking straight into the camera, with a little smile">
</div>
</div>
<footer>
<!-- all the code related to the footer here -->
</footer>
</main>
</body>
</html>`
You probably want to have a look at display: flex link
Here is an example.
/* the flex container */
.collage_index_group {
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
/* the flex items */
.collage_index {
width: 50px;
height: 30px;
background-color: #f1f1f1;
margin: 10px;
padding: auto;
font-size: 30px;
}
<h1> <center>WELCOME TO FREYAS PHOTOS!</center></h1>
<h2> <center>We are where you are, helping you capture the moments of life.</center></h2>
<div class="collage_index_group">
<div class="collage_index">
<img src="img/optimized images/adorable-20374_1920_250x250.png">
</div>
<div class="collage_index">
<img src="img/optimized images/bride-1867228_1920._250x250png.png">
</div>
<div class="collage_index">
<img src="img/optimized images/smile-2072908_1920_250x250.png">
</div>
</div>
Thanks for sharing the code, please do not forget to share the css. If you could make a snipplet with it it would be perfect ;)
I will now try to adjust my snipplet accordingly.
Edit
I mistakenly wrote something about h1-h6, but found out I was wrong after double checking.
Im not sure that what you mean
/* HORIZONTAL SCROLL */
.scroll-container{
overflow: auto;
white-space: nowrap;
padding: 5px 70px 5px 20px;
background: transparent;
height: 100%;
border-radius:15px;
}
.scroll{
display:inline-block;
}
.scroll img {
margin-right:22px;
width:250px;
height:100px;
width:33%;
}
<div style="text-align:center; font-style:italic;">Scroll to left</div>
<div class="scroll-container">
<div class="scroll">
<!-- PLACE YOUR IMG URL HERE -->
<img src="https://media.istockphoto.com/photos/programmer-working-with-program-code-picture-id1075599562?k=20&m=1075599562&s=612x612&w=0&h=cDFY2kKyhFzSNNlDQsaxoekIW0v7iyaMBkxp11Fz33U="/>
<img src="https://www.careergirls.org/wp-content/uploads/2015/06/Computer_Programmer1920X10180.jpg"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzayYFmglnoDZ2RifRciFtyiRGEXBHiMZClL06Ul5RYslak48IW9kKxSDB9-_g9954-vM&usqp=CAU"/>
</div>
</div>
I am making some product cards with an "Add to cart" button. Everything else is aligned centred in the card, but the button is somehow to the far right even tho the code says otherwise. What I mean by this is the button is inside the card's div, so I don't know how if there is something wrong in my code or I'm missing a key style element. I should note my college project is purely website redesign, not development/implementation hence the webpage looks incomplete. I'm trying to get this little blunder outta the way before I add more product cards, filling the page. Also bear in mind I am still new to coding but I'm always learning and improving.
#font-face {
Src: url(customfont/Futuristic.ttf);
Font-family: Future;
}
#font-face {
Src: url(customfont/RobotInvaders.ttf);
Font-family: Robo;
}
h1 {
Font-family: Future;
Color: red;
Text-align: center;
}
h2 {
color: blue;
text-align: left;
Font-family: Robo;
}
.servicesnav nav {
Width: 100%;
Height: 70px;
Overflow: hidden;
Background: none;
}
.servicesnav li {
Display: inline;
Padding-right: 40px;
}
.servicesnav ul {
List-style-type: none;
}
.servicesnav li a:hover {
Background: blue;
}
.card {
max-width: 200px;
Height: 100%;
margin: auto;
text-align: center;
font-family: arial;
}
.card h3 {
Color: red;
}
.price {
color: white;
font-size: 22px;
}
.description {
Color: white;
}
.card button {
border: none;
outline: 0;
padding: 12px;
color: white;
background-color: #000;
Text-align: center;
cursor: pointer;
width: 150px;
font-size: 18px;
}
.card button:hover {
Color: blue;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="description" content="Geek Yourself Out" />
<title>Geek Yourself Out</title>
<link rel="stylesheet" type="text/css" href="GeekYourselfOut.css" />
<link rel="stylesheet" type="text/css" href="Services.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="logo">
<img src="logo.jpg" width="95"/>
</div>
<div class="coolname">
<img src="coolname.jpg" width="105"/>
</div>
<nav>
<ul>
<li class="current-page">Home</li>
<li>About Us</li>
<li>Services</li>
<li>Consultation & Quotes</li>
<li>Contact Us</li>
<li>Client Referrals</li>
<li>Blog</li>
</ul>
</nav>
<h1>Choose one of these categories to start browsing! </h1>
<div class="servicesnav">
<nav>
<ul>
<li>Physical Products</li>
<li>Marketing Materials</li>
<li>Apparel</li>
<li>Photos</li>
</ul>
</nav>
</div>
<h2>Physical Products</h2>
<div class="card">
<img src="ProductService/custom.png" alt="Custom" style="width:100%">
<h3>Custom Product</h3>
<p class="price">$5-$100</p>
<p class="description">Upload your 3D design file(s) and get it printed into a product! No design is too big or small! *Please only upload completed and full-colour 3D design files. We will reject orders of 2D files, unfinished design, or black-and-white.* </p>
<p><button>Add to Cart</button></p>
</div>
<footer>
<div class="bottom-content">
<h3>Geek Yourself Out</h3>
<p>To get some behind-the-scenes action to staying updated on the latest projects, check out these social media links! All follows, likes, comments, and shares are appreciated. </p>
<div class="socials">
<li><img src="facebook-box-fill.png" alt="Facebook"</li>
<li><img src="instagram-fill.png" alt="Instagram"</li>
</div>
</div>
<div class="bottom-page">
<p>copyright ©2022 Geek Yourself Out. Designed by Kimmy Vo</p>
</div>
</footer>
</body>
</html>
Maybe its issue with any other parent div because when I tried your HTML and CSS on codepen add to cart button is centered.
You can see the codepen I used:- https://codepen.io/GauravSingh96/pen/JjMEeoQ
This is the html used:-
<div class="card">
<img src="ProductService/custom.png" alt="Custom" style="width:100%">
<h3>Custom Product</h3>
<p class="price">$5-$100</p>
<p class="description">Upload your 3D design file(s) and get it printed into a product! No design is too big or small! *Please only upload completed and full-colour 3D design files. We will reject orders of 2D files, unfinished design, or black-and-white.* </p>
<p><button>Add to Cart</button></p>
You will have to recheck all the codes from top.
Hey there i try your code but it shows add to cart button in the center. But still if you face issue try to reset the css by using following code in your style.css file:
* {
padding: 0;
margin: 0;
}
I also attach screenshot of your code with this where your code shows add to cart button in the center.
I have the below SASS and HTML code. I'm using PureCSS by Yahoo.
What I'm trying to do
I'm trying to get this to have a 3 column layout for large desktop size screen, with the pure-lg-3-24 classes essentially acting as margins, then collapse it to a 1 column layout for mobile screens.
What actually happens
When I add pure-u-1 to my classes below (in a large desktop size browser width), all the html content falls into one column. If I remove pure-u-1 it all collapses together and the text sits on top of each other, rendering it unreadable. Why is this? What's the starting point for getting it to behave responsively? I thought nested grids were allowed in PureCSS.
SASS
#layout {
margin: 0;
padding: 0;
border-bottom: 1px solid #e1e1e1;
.pure-g {
h1 {
font-family: Georgia, serif;
a {
text-decoration: none;
color: #990000;
}
}
h2 {
font-size: 1em;
font-weight: normal;
}
mark {
color: #990000;
background: none;
font-weight: 700;
}
}
}
ul.languages {
list-style-type: none;
li.active {
font-weight: 700;
a {
color: #666;
}
}
li {
display: inline;
}
}
HTML
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
:
<header id="layout" class="pure-g">
<div class="pure-u-1 pure-u-lg-3-24"> </div>
<div class="pure-u-1 pure-u-lg-18-24">
<div class="pure-g">
<div class="pure-u-1 pure-u-lg-12-24">
<h1>Trial Dates</h1>
</div>
<div class="pure-u-1 pure-u-lg-12-24">
<p>Contact us at <mark>(800) 800-COLLECT</mark></p>
</div>
</div>
<div class="pure-g">
<div class="pure-u-1 pure-u-lg-12-24">
<h2>Tagline</h2>
</div>
<div class="pure-u-1 pure-u-lg-12-24">
<ul class="languages">
<li class="active">
English
</li>
<li>
Español
</li>
<li>
漢語
</li>
</ul>
</div>
</div>
</div>
<div class="pure-u-1 pure-u-lg-3-24"> </div>
</header>
As it turns out, according to a part of the documentation, you need to add the following in addition to the core pure css:
<!--[if lte IE 8]>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
<!--<![endif]-->
Ok so I'm just playing around with web development and i'm making my personal site just to get experience. Currently I am having two issues.
I have my "About" section I can't seem to be able to move my picture in the center and making the radius 100%. It's really bugging me because it won't work. I already put the CSS border-radius: 100% and Margin: 0 auto; but nothings working. I then tried the Text-align: center; and it didn't work.
I have a solid border that extends from the "#section" ID. But I want it not to cover my footer. In the index page it includes the footer which I don't want, but on my other pages like About, and Contact it does not cover the footer like i initially intended it to do.
Also on my header I have an H1 and H3 element that goes back to my home page. My problem with it is that when I move the mouse away from the header to the left or right horizontally it still shows that there's a link even though the letters are not there. I want the link to end where the word ends.
Can somebody find out what am I doing wrong and how i can do to avoid it?
I will include my HTML index page, then About page and then my CSS.
Index page where i want to exclude the footer from solid border.
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<title>Dalexis The Great Critic</title>
</head>
<body>
<header >
<a href="index.html" class="headersection">
<h1>Dalexis Peguero</h1>
</a>
<a href="index.html" class="headersection">
<h3>Designing Websites Since Last Month</h3>
</a>
<nav class="navsection">
<ul id="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact Us
</li>
</ul>
</nav>
</header>
<div id="section">
<section >
<div id="statement">
<h2>We are so confident in our abilites to satisfy you that we'll give you your money back if you weren't satisfied!</h2>
<h4>Get Invoces: We provide the quickest way to get people to buy your shit! </h4>
<h4>Make them happy: We'll make sure your customers are all happy! </h4>
</div>
<div id="testimonies">
<h2> Client Testimonies </h2>
<hr style="width:90%; />
<p class="paragraph"> <img src="teona.jpg" class="clients"/>He was amazing with services! He did everything right!" </p>
<h6>Home Town Loser </h3>
<hr style="width:90%; />
<p class="paragraph"> <img src="marvin.jpg" class="clients"/>"As a rapper I enjoyed his services. He made my website look hella dope and I loved it! Will return to him"</p>
<h6>MArvelous Marv</h3>
<hr style="width:90%; />
<p class="paragraph"> <img src="jon.jpg" class="clients"/>"He was quick and succint! He helped me make my own dispensary website and now all my clients are so satisfied! Thanks Dalexis! !"</p>
<h6>Another Home Town Loser </h3>
<hr style="width:90%; />
</div>
</section>
</div>
<footer>
<img src="IMG/facebook-logo.png" alt="facebook" class="socialicon">
<img src="IMG/twitter-logo.png" alt="twitter" class="socialicon">
<p>© Dalexis Industries </p>
</footer>
</body>
</html>
This is my about page where i want to center my picture and make the radius 100%.
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css">
<link href='http://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'>
<title>Dalexis The Great Critic</title>
</head>
<body>
<header >
<a href="index.html" class="headersection">
<h1>Dalexis Peguero</h1>
</a>
<a href="index.html" class="headersection">
<h3>Designing Websites Since Last Month</h3>
</a>
<nav class="navsection">
<ul id="nav">
<li>
Home
</li>
<li>
About
</li>
<li>
Portfolio
</li>
<li>
Contact Us
</li>
</ul>
</nav>
</header>
<img src="IMG/dalexis.jpg" alt="my photo" class="about-photo" >
<h3>About<h3>
<p> This is my Web Design website. If you are interested in my services you can either call me or email me. I've been desiging websites for five weeks and my costumers love their sites"</p>
<p> If you like to follow me on facebook you can find me at Dalexis.
</div>
<footer>
<img src="IMG/facebook-logo.png" alt="facebook" class="socialicon">
<img src="IMG/twitter-logo.png" alt="twitter" class="socialicon">
<p>© Dalexis Industries </p>
</footer>
</body>
</html>
CSS
body {
font-family: abel;
}
h1, h3 {
text-align:center;
}
a {
text-decoration: none;
color: #373737;
}
ul {
list-style: none;
}
img {
max-width: 100%;
}
html {
color: #373737;
background-image:url('bkg-blu.jpg');
}
/******************************
HEADER
***********************************/
}
#nav li { display:inline; border-style:groove; }
#nav {text-align:center; }
/******************************
nav
***********************************/
/******************************
SECTION
***********************************/
#statement {
text-align: center;
}
#testimonies {
text-align: center;
}
section h2 {
margin: 0 20px;
padding: 0px 60px;
}
#section {
border-style:solid;
border-width: 1px;
width: 90%;
height: 100%;
padding: 5px 5px;
margin:15px 5px 15px 100px;
}
section div p img {
font-style:italic;
color: blue;
}
.clients {
width: 40px;
height: 40px;
margin: 0 10px;
padding: 10px;
font-style: italic;
}
/******************************
footer
***********************************/
.socialicon {
width: 20px;
height: 20px;
margin: 0 5px;
}
footer img {
margin: 0;
color: fff;
clear: both;
}
.selected, a:hover {
color: grey;
}
/******************************
PAGE: ABOUT
/***************************/
.about-photo {
width: 250px;
height: 200px;
display: block;
display: block;
margin: 0 auto 30px;
max-width: 150px;
border-radius: 100%;
}
The answer for question 1.
Change this
<img src="IMG/dalexis.jpg" alt="my photo">
To this
<div class="about-photo"><img src="IMG/dalexis.jpg" alt="my photo"></div>
CSS
.about-photo {
width: 250px;
height: 200px;
margin: 0 auto;
}
.about-photo img {
width: 100%;
height: 100%;
-moz-border-radius: 100%;
-webkit-border-radius: 100%;
border-radius: 100%;
}
I'm currently working on a menu for a website and got a problem: I have a logo which should be on the left side and menu buttons which should be on the right side. This is what I got so far:
<!DOCTYPE HTML>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Share:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<meta charset="utf-8">
<title>Menu</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-family: 'Share', cursive;
}
#header {
background-color: ;
}
#header_logo {
width: ;
margin-top: ;
}
#header_menu {
width: 100%;
}
.menubutton {
height: 2.5em;
line-height: 2.5em;
display: inline-block;
background-color: ;
margin-left: 20px;
}
a {
font-family: 'Share', cursive;
}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}
</style>
</head>
<body>
<div id="wrapper" align=""> <!-- Beginning of wrapper -->
<div id="header"> <!-- Beginning of Header -->
<div id="header_logo" align="left">
<img src="http://futurized.t15.org/fut_logo.png" style="height: 12px; z-index: 2;"/>
</div>
<div id="header_menu" align="right">
<div class="menubutton">
Home
</div>
<div class="menubutton">
Info
</div>
<div class="menubutton">
Werben
</div>
<div class="menubutton" align="right" style="margin-right: 20px;">
Kontakt & Impressum
</div>
</div>
</div> <!-- End of header -->
</div> <!-- End of wrapper -->
</body>
</html>
The problem is that the logo is not on a line with the menu buttons…
Before I added the logo everything worked perfect. I tried different things but nothing worked. Do you guys have an idea how I can solve that problem?
Add float:left to your #header_logo div.
jsFiddle example
Note that you may also want to reduce or eliminate the line-height property on your .menubutton class if you want the spacing to be even tighter.
You may also try for display: inline-block;
This property allows a DOM element to have all the attributes of a block element, but keeping it inline.
Also do check this article