This question already has answers here:
How to align 3 divs (left/center/right) inside another div?
(21 answers)
Closed 1 year ago.
My question is why is that third div( class= "right") goes downward??
I tried using vertical-align:top; also but didn't work.
I want div.nav to be at mid and div.right to be at right with all three of them being at the same top postition
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.left{
float:left;
display:inline-block;
}
.nav{
display:block;
width:20%;
margin:auto;
}
.right{
float:right;
display: block;
vertical-align: top;
}
.group:before,
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
Answering your question
You used display: block;. display: block will take a 100%. If you want the div to only take the width of the item itself then use display: inline-block;
Fixing your code
Use display: flex; with justify-content: space-between; and remove all the other stuff. You can also add other divs in the header but flex will position them perfectly
That means you can also remove the classes from the divs in the header
Optimized Code:
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
header {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
Example with more Divs in the header:
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
header {
display: flex;
justify-content: space-between;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
<div>Text</div>
</header>
</body>
</html>
floatting elements will make a break before floatting if anything in the regular flow stands before it , that's why .right shows right under .nav.
You can set .nav after the floatting elements in the code, so it doesn't disturb the floatting elements.
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.left{
float:left;
}
.nav{
display:block;
width:20%;
margin:auto;
}
.right{
float:right;
}
.group:before,
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="right">right</div>
<div class="nav">Nav</div>
</header>
</body>
</html>
Nowdays, flex or grid is used for this
flex
body {
margin: 0px;
padding: 0px;
background-color: red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.top-header {
display: flex;
}
.nav {
width: 20%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
grid
body {
margin: 0px;
padding: 0px;
background-color: red;
}
.top-header {
display: grid;
grid-template-columns: auto 20% auto;
justify-content: space-between
}
.left {}
.nav {}
.right {}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
body{
margin:0px;
padding:0px;
background-color:red;
/*background-image:url('../images/GOW_1.jpg');
background-size: cover;*/
}
.left{
float:left;
display:inline-block;
width: 50%;
}
.nav{
display: inline-block;
}
.right{
display:inline-block;
float:right;
display: block;
vertical-align: top;
}
.group:before,
.group:after{
content:"";
display:table;
}
.group:after{
clear:both;
}
.group{
zoom:1;
}
<!DOCTYPE html>
<html>
<head>
<title>Gaming world</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="top-header group">
<div class="left">left</div>
<div class="nav">Nav</div>
<div class="right">right</div>
</header>
</body>
</html>
Try using display:inline-block; on all divs. Then you can set the location of the nav with width of the first div
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed last month.
here is the html code and CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<title>Frontend Mentor | Space tourism website</title>
<link rel="stylesheet" href="testing-css/testing.css">
</head>
<body>
<div class="bg">
<div class="main-menu">
<div class="logo">
<img class="logo-img" src="assets/shared/logo.svg" alt="logo-img">
</div>
<!-- <div class="line">
<div class="horizontal-line"></div>
</div> -->
</div>
</div>
</div>
</body>
</html>
body {
margin: 0;
padding: 0;
background-image: url('../assets/home/background-home-desktop.jpg') ;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
width: 100vh;
}
.main-menu {
display: block;
margin: 50px;
padding: 25px 0 25px 0;
width: 2000px;
height: 50px;
font-size: 0;
}
.logo {
width: 50px;
height: 50px;
display: inline-block;
}
.logo-img {
width: 50%;
height: 50%;
}
.line {
width: 600px;
height: 50px;
display: inline-block;
padding-left: 50px;
padding-right: 50px;
}
.horizontal-line {
width: 600px;
height: 2px;
display: block;
background-color:#979797;
position: relative;
bottom: -50%;
}
the result shows:
when there is no second inline-block element
when remove the comment remarks, the html code is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon-32x32.png">
<title>Frontend Mentor | Space tourism website</title>
<link rel="stylesheet" href="testing-css/testing.css">
</head>
<body>
<div class="bg">
<div class="main-menu">
<div class="logo">
<img class="logo-img" src="assets/shared/logo.svg" alt="logo-img">
</div>
<div class="line">
<div class="horizontal-line"></div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS code is the same as before, no changes.
the results shows :
when there has second inline-block element
the first inline-block element were pushed down...
what is the reason for this happening??
So , what is reason that affects the first inline-block element's position??
With this design, the divs have a margin on left and on the right that I need to remove but only on .custom-mobile-row not in the rest on the page like if I use
body{
margin: 0;
}
this is the html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="custom-mobile-row">
<div class="half-row" id="div1"></div><div class="half-row" id="div2"></div>
</div>
</body>
</html>
and the css
.custom-mobile-row{
width: 100%;
}
.half-row{
width: 50%;
display: inline-block;
height: 500px;
background-size: cover;
background-position: center;
vertical-align: top;
}
#media (max-width: 768px) {
.half-row {
width: 100%;
}
}
#media (min-width: 768px) {
.custom-mobile-row{
white-space: nowrap;
}
}
#div1{
background-image: url("img1.jpg");
}
#div2{
background-image: url("img2.jpg");
}
body{
margin: 0;
}
body{
margin:0;
}
.fake-body{
margin:8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class='fake-body'>
</div>
<div class="custom-mobile-row">
<div class="half-row" id="div1"></div><div class="half-row" id="div2"></div>
</div>
<div class='fake-body'>
</div>
</body>
</html>
Hi guys i have a problem with overlap this is a full header with a background image and i have some content also a button but is pushing out of header,how i can fix this?
What i am trying to do is full header with a background but i am stuck here.
Thank you for helpLook what is the problem
html, body {
height: 100%;
padding:0;
margin:0;
}
h1{
margin:0;
}
.wrap{
margin:0 auto;
width:950px;
height:100%;
}
header {
background:url("https://unsplash.com/#aidanjjmeyer?photo=ckrUhWyTde8");
background-size:cover;
background-repeat:no-repeat;
width:100%;
height:100vh;
}
.text{
text-align: Center;
position: relative;
top: 50%;
}
.menu{
padding-top:30px;
}
.bar1 , .bar2 , .bar3{
width:35px;
height:3px;
background-color:#262626;
margin:6px 0;
}
.btn{
border:1px solid aqua;
background:transparent;
font-size:25px;
color:white;
outline:none;
}
#about{
height:300px;
width:100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="custom.css">
<title>Journal</title>
</head>
<body>
<header>
<div class="wrap">
<div class="menu">
<div class="bar1"></div>
<div class="bar2"></div>
<div class="bar3"></div>
</div>
<div class="text">
<h1>Brooke Journalist</h1>
<button class="btn">Contact</button>
</div>
</div>
</header>
<section id="about">
</section>
</body>
</html>
I have the menu on the bottom of the page, and I'm trying to center the wrapper div
with logo and buttons inside the doc. The centering doesn't work. Can you guys tell me why?
I want the logo to float to the left, and buttons to float to the right, but the wrapper div must be centered.
Here's the code:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
margin-left:30px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
To center a block level element horizontally, the easiest method is to apply a width and set margin-left and margin-right to auto (or margin: auto; or margin: 0 auto;).
Since you already have a width on .navigation, just apply margin: auto to .navigation and it will center horizontally.
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
margin: auto;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
margin-left:30px;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
By default html elements are left aligned. (like your .navigation)
if you add a margin:auto on a block element(note: wrapper div is a block element) it will add up the remaining space to the viewport and add a left-margin and right-margin to the block element, so it will look centered.
So, giving a margin:auto styling to the wrapper div will do the job.
just like this:
html,body {
min-width:320px;
min-height:320px;
margin:0;
font-family: 'Lato', sans-serif;
text-align:center;
}
h1 {
margin-top:0;
font-size:68px;
font-weight:700;
}
.header-wrapper {
background-image: url("https://placehold.it/1500x646");
background-size:cover;
background-position:center;
height:645px;
text-align:center;
padding:120px;
}
.slider-wrapper2 {
background-color:white;
height:645px;
text-align:center;
padding:120px;
}
.slider1 {
padding-top:120px;
}
.navigation {
max-width:1170px;
height:94px;
background-color:white;
margin:0 auto;
}
nav {
float:right;
text-transform:uppercase;
}
a {
text-decoration:none;
color:#626262;
padding:40px 20px 40px 20px;
margin:0;
background-color:#dfbb42;
}
a:hover {
color:white;
}
#logo {
float:left;
}
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Random title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
</head>
<body>
<section>
<div class="header-wrapper">
<h1>Just some random text</h1>
</div>
</section>
<section id="menu2">
<div class="navigation">
<nav>
Home
Menu 2
Menu 3
Menu 4
Menu 5
</nav>
<img src="http://placehold.it/200x70" alt="Logo" id="logo">
</div>
</section>
<section id="menu3">
<div class="text-boxes">
<img src="images/slider-buttons/typography/typography-icon.jpg">
</div>
</section>
<section id="menu4">
<div class="picture-boxes">
<p>parapap</p>
</div>
</section>
</body>
</html>
This is My code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width = device-with, initial-scale = 1">
<title>Tittle</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body, html, .sidebar, .body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
.sidebar {
background-color: green;
width: 10%;
float: left;
height: 100%;
//position: fixed;
}
.body {
float:left;
width:90%;
height:100%;
}
</style>
</head>
<body>
<div id="container">
<div class="sidebar">
</div>
<div class="body">
<div id="Div">
<img src="http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg" alt="image" width="100%" height="1200px"/>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
This code works perfectly but I want the sidebar to be fixed at its position when user is scrolling the page here the output
I tried this CSS property
postion: fixed;
and this is the Output
I need help cant'figure out what to do and I have searched alot but can't find suitable solution
try to add margin-left: 10% to your .body class (and delete the floatfor it)
whats about this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge">
<meta name="viewport" content="width = device-with, initial-scale = 1">
<title>Tittle</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style>
body,
html,
.sidebar,
.body {
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100%;
}
.sidebar {
background-color: green;
width: 10%;
float: left;
height: 100%;
position: fixed;
top: 0;
left: 0;
}
.body {
float: left;
width: 89%;
height: 100%;
position: absolute;
left: 11%;
}
</style>
</head>
<body>
<div id="container">
<div class="sidebar">
</div>
<div class="body">
<div id="Div">
<img src="http://www.wallpapereast.com/static/cache/85/2f/852fa0958af9bfca3e64fa66aa1ad907.jpg" alt="image" width="100%" height="1200px" />
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</body>
</html>
information found at https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Positionierung/position