How do I position the navbar inside the header? If I float the divs inside the header it works fine. But when I remove the float the navbar positions below the header. I dont understand it. How do I fix it?
html{
height:100%;
}
body{
margin: 0px;
padding: 0px;
background-color: grey;
height:100%;
width:100%;
}
#container{
height:90%;
width:90%;
margin-left: 5%;
margin-right: 5%;
border-style: solid;
}
#header{
height:8%;
width:100%;
}
.logo{
height:80%;
width:10%;
}
.nav{
height:90%;
width:75%;
margin:auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>basic</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="container">
<div id="header">
<div class="logo">
</div>
<div class="nav">
</div>
</div>
</div>
</body>
</html>
bydefault div element are block label element that's it took 100% width.
you can change it's to 'inline' element using float, inline-block. >br/>
check updated snippet below
html {
height:100%;
}
body{
margin: 0px;
padding: 0px;
background-color: grey;
height:100%;
width:100%;
}
#container{
height:90%;
width:90%;
margin-left: 5%;
margin-right: 5%;
border-style: solid;
}
#header{
height:8%;
width:100%;
}
.logo{
height:80%;
width:10%;
display: inline-block;
}
.nav{
height:90%;
width:75%;
display: inline-block;
}
<div id="container">
<div id="header">
<div class="logo">logo</div>
<div class="nav">
Nav1
Nav2
Nav3
Nav4
</div>
</div>
</div>
If u make the logo position:absolute it wont push down the navbar.
You do have to specify heigth and width since it will not compare to the parent div.
.logo{
height:40px;
width:100px;
position: absolute;
}
An other way of fixing this is by giving a negavtive margin to the navbar.
This way you dont have to specify the width and heigth of the logo.
.nav{
height:90%;
width:75%;
margin:-35px auto;
}
Related
I have a header with width: 100% and I want to make it automatically adjustable not only to screen width, but to page full width that can be stretched beyond screen width by other elements. I can do it with JS, but I wonder if it is possible to use pure CSS to achieve this.
In the example below the A block is intended to be the same size as the B block, but it is much shorter on small screens (just scroll everything to the right and you can see).
html,body{
position:relative; width:100%;
}
#A{
position:relative; width:100%;
background:lightblue; color:white;
}
#B{
position:relative; width:5000px;
background:darkblue; color:white;
}
<html>
<head></head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
Any ideas?
You can try adding display: grid to the container, in this case body
body {
display: grid;
}
#A {
background: lightblue;
color: white;
}
#B {
position: relative;
width: 5000px;
background: darkblue;
color: white;
}
<html>
<head></head>
<body>
<div id="A">A</div>
<div id="B">B</div>
</body>
</html>
If you wrap the two divs (A & B) inside another you can achieve this.
html,body{
position:relative; width:100%;
}
#A{
position:relative; width:100%;
background:lightblue; color:white;
}
#B{
position:relative; width:5000px;
background:darkblue; color:white;
}
.header-wrap { display: inline-block; }
<html>
<head></head>
<body>
<div class="header-wrap">
<div id="A">A</div>
<div id="B">B</div>
</div>
</body>
</html>
html,
body {
position: relative;
width: 100%;
}
#B {
position: absolute;
width: 100%;
top: 100%;
left: 0;
background: lightblue;
color: white;
}
#A {
position: relative;
width: 5000px;
background: darkblue;
color: white;
min-width:100%;
}
<div id="A"><div id="B">B</div>A</div>
Try giving your A div a max-width of 5000px as well as width:100%
#A{
position:relative;
width:100%;
max-width:5000px;
background:lightblue;
color:white;
}
this is my html code
<html>
<head>
<link rel="stylesheet" href="main-pd.css"/>
</head>
<body>
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
</body>
</html>
and this is my css code
.menu-wrap{
background-color:pink;
}
ul{
background-color:blue;
height:100px;
border:solid;
width:350;
float:right;
}
without float:right property it is showing the background:pink color of the parent div and in the above case no pink background. Why is it happening?
Because you did not mention the width and height of parent div, So after putting float:right in child element, parent also float on right. Check below code:
.menu-wrap{
background-color:pink;
display:inline-block;
width: 100%;
height: 105px;
}
ul{
background-color:blue;
height:100px;
border:solid;
width:350px;
float: right;
position: relative;
top: -17px;
}
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
If i understood your question correctly then this is what i suggest:
HTML:
<body>
<div class="menu-wrap">
<ul class="menu">
</ul>
</div>
</body>
CSS:
.menu-wrap{
width: 100%;
height: 500px;
float: left;
background-color:pink;
}
ul{
width:350px;
height:100px;
margin: 0;
padding: 0;
float: right;
background-color:blue;
border:solid;
}
OR:
CSS:
.menu-wrap{
height: 500px;
position: relative;
background-color:pink;
}
ul{
width:350px;
height:100px;
margin: 0;
padding: 0;
position: absolute;
right: 0;
top: 0;
background-color:blue;
border:solid;
}
Hope this helps you out.. definitely take a look at float and position:relative/position:absolute css properties in detail.
Finally i have understood the reason :) it is simply because
the parent element contained nothing but floated element, the height of it collapses to nothing.
for more details refer:- https://css-tricks.com/all-about-floats/
You must have something else your css file that is doing that. I have tested your code in jsfiddle and is working fine. Have a look https://jsfiddle.net/max234435/boL8zs4a/
I am building a template which has a fixed header and a fixed side bar on the left. My issue is that when I shorten the window and scroll horizontally, the fixed div overlaps the adjacent '.content'.
I don't want the fixed '.sidebar1' to overlap '.content' div when I scroll horizontally. How do I fix this?
html,body
{
margin: 0;
padding: 0;
width:100%;
height:100%;
}
.header
{
width:100%;
height:46px;
position:fixed;
top:0;
background:blue;
}
.page_wrap
{
width:1040px;
display:block;
margin:70px auto 0;
background:purple;
}
.content
{
width:500px;
height:1060px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
margin-left:270px;
}
.sidebar1
{
display:inline-block;
width:250px;
height:500px;
position:fixed;
top:70px;
background:pink;
margin:5px;
vertical-align:top;
}
.sidebar2
{
display:inline-block;
width:250px;
background:pink;
margin:5px;
vertical-align:top;
}
.footer
{
width:1040px;
height:50px;
margin: 20px auto 0;
text-align:center;
background:magenta;
}
<!DOCTYPE HTML>
<html>
<head>
<title>Temp</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="temp.css">
</head>
<body>
<div class="header">
Header Content
</div>
<div class="page_wrap">
<div class="sidebar1">
sidebar 1
<div class="test"></div>
</div>
<div class="content">
Article Content
</div>
<div class="sidebar2">
sidebar 2
</div>
</div>
<div class="footer">Footer</div>
</body>
</html>
The reason for this is that fixed technically makes it take up no space on the page.
I noticed you have fixed width and height on your content, which is probably your first problem. Fixed width on large containers is typically a bad idea, as it breaks everything else on your page, or prevents it from displaying the way you want.
The end result should look something like:
.content{
width:500px;
height:1060px;
margin-left:270px;
display:inline-block;
background:red;
color:white;
margin:5px;
vertical-align:top;
}
If you need it to scroll horizontally for some reason, then I would say set position:fixed; on the div.content and add a property to your HTML wrap="off" and see if that does what you want it to.
Hopefully this helped. Cheers.
I hope I understood your question
Check https://jsfiddle.net/LeoAref/47p6r6hq/
<header>Header</header>
<aside>Side</aside>
<section>
<div class="wide">
My Wide Content
</div>
</section>
CSS
header {
height: 30px;
line-height: 30px;
background: red;
color: #fff;
text-align: center;
position: fixed;
top: 0;
width: 100%;
left: 0;
}
aside {
top: 30px;
bottom: 0;
width: 300px;
background: blue;
color: #fff;
text-align: center;
position: fixed;
left: 0;
}
section {
top: 30px;
bottom: 0;
left: 300px;
right: 0;
background: #000;
color: #fff;
text-align: center;
position: fixed;
overflow-x: scroll;
}
.wide {
color: #000;
width: 1500px;
background: yellow;
height: 50px;
}
I've been trying to get my footer to display properly, and have combined a number of approaches, but am still getting the same result. The footer sits a fixed number of pixels from the top of the page, and doesn't extend all the way across the page. I need it to display just below the content, no matter the size of the content, and for it to extend all the way across the page.
the CSS:
html, body, #container { height: 100%; }
#container { height: auto !important; min-height: 100%; margin-bottom:-50px;}
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-align:center;
float:left;
position:relative;
body:before;
content:"";
overflow:auto;
margin-top:50px;
padding:10px;
}
#footer, #push{
height:50px;
}
.clearboth {
clear:both;
}
The HTML:
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
You need to make sure that you reference your css file from your html, so your html should look like this, if they are in the same directory you don't need to add the path:
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="path_to/YOUR_CSS_FILENAME_HERE.css">
</head>
<body><div id="container">
<!--Content-->
<div id="push"></div>
</div>
<div class="clearboth"></div>
<div id="footer">Footer Content</div>
and your css, I took away the left -5%:
#page {
min-height: 100%;
position:relative;
}
#main {
padding-bottom: 50px;
}
#footer {
background-color:#4a4a4a;
position: absolute;
width: 100%;
bottom: 0;
height: 50px;
padding:10px;
font-family:'discoregular';
display: block;
overflow:auto;
text-align:center;
float:left;
margin-top:50px;
}
change the css to the following.You can chage the "bottom" so that it can come up
#footer {
width:100%;
display:block;
background-color:#4a4a4a;
color:#fff;
font-family:'discoregular';
left:-5%;
bottom:0;
top:100%;
height:100%;
text-decoration: none;
text-align: center;
width: 100%;
position: fixed;
z-index: 1000;
vertical-align: baseline;
bottom: -50px;
padding:10px;
}
All I added into my footer styles after reading this post was- overflow:auto; - and it's sorted now
Hello I have a lot of trouble finding a way to center a div in safari on ipad...this works in chrome on ipad but safari doesn't scale in landscape format...the are margins on the left and right but i got to scroll all over the whole thing. Any ideas to make this work in both browsers..chrome and safari?
HTML:
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
CSS:
#wrapper{
margin: 0 auto;
width:90%;
height:90%;
background-color: black;
}
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
This is how I would do this. Here is an example
HTML:
<div id="wrapper">
<div class="outer">
<div class="inner">
<div class="content">
</div>
</div>
</div>
</div>
CSS:
#wrapper{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
}
.outer{
display:table;
table-layout:fixed;
height:100%;
width:100%;
}
.inner{
display:table-cell;
text-align:center;
vertical-align:middle;
width:100%;
position:relative;
}
.content{
width:90%;
height:90%;
background:red;
display:inline-block;
}
If you're defining your width to be 90%, you can avoid the issue and simply set margin: 0 5%;