I am trying to make a float layout using CSS with the following code
<html>
<head>
<link rel="stylesheet" type'text/css" href="styles.css">
</head>
<body>
<div id="header">
<h1>header</h1>
</div>
<div id="authentification">
<h1>authentification</h1>
</div>
<div id="cart">
<h1>cart</h1>
</div>
<div id="content">
<h1>content</h1>
</div>
<div id="footer">
<h1>footer</h1>
</div>
</body>
And the associated CSS code:
#header
{
float: left;
background-color: #EAE5DF;
width: 80%;
height: 175px;
}
#authentification
{
width: 20%;
height: 175px;
background-color: #8A5D1D;
float: right;
}
#cart
{
width: 20%;
min-height: 400px;
background-color: #861825;
float: right;
}
#content
{
width: 80%;
min-height: 400px;
background-color: #EAE5DF;
float: left;
overflow: hidden;
}
#footer
{
width: 100%;
min-height: 50px;
background-color: #8A5D1D;
clear: both;
display: table;
}
Now the problem is that the code above displays the the divs as they are meant to be display but however leaves a blank space at the bottom.
What I am trying to do is figure out how to get rid of the white space by:
1) Having footer at the bottom of the page
2) when the div 'content' or 'cart' gets more element than the other, both of them should be the same height of course.
I'd appreciate help.
When you want to have divs side by side it is not a good idel to do this by float, Instead use flex.
.wrapper{display: flex;}
#authentification, #cart{width:20%; background-color: #bbb;}
#header, #content{flex: 1; background-color: #eee;}
#footer{background-color: orange;}
h1{margin: 0;}
<div class="wrapper" style="height:100px;">
<div id="header">
<h1>header</h1>
</div>
<div id="authentification">
<h1>authentification</h1>
</div>
</div>
<div class="wrapper" style="height: calc(100vh - 150px);">
<div id="content">
<h1>content</h1>
</div>
<div id="cart">
<h1>cart</h1>
</div>
</div>
<div id="footer" style="height: 50px;">
<h1>footer</h1>
</div>
Related
I have content navigation div overlapping menu navigation div. Please let me know what am i missing here. Please find fiddle link below:
https://jsfiddle.net/y4c2xs5j/1/
HTML:
<div class="top-nav">
<div class="menu-nav">
<div class="row">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
</div>
<div class="content-nav">
<div class="row">
<div class="col-md-12">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>
<p>
Card content
</p>
</div>
</div>
<div class="col-md-4">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: red;
height: 100vh;
}
.top-nav {
width: 100vw;
}
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
}
As per my understanding, you want to cover only 60px width with menu-nav, and rest want to cover with content-nav, According to below code:
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
}
If I am getting correct then you just neeed to add one more property with content-nav, overflow:hidden;
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
overflow:hidden;
}
By adding overflow hidden, you will get complete width rest 60px with content-nav, That is issue cause by float:left, when we are use float property, then the issue is generated, for the same we have to use overflow:hidden
Try this code. Is this what you needed ?
<div class="top-nav">
<div class="menu-nav">
<div class="row">
<div class="col-md-12">
<span>Test</span>
</div>
</div>
</div>
<div class="content-nav">
<div class="row">
<div class="col-md-12">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8">
<div>
<p>
Card content
</p>
</div>
</div>
<div class="col-md-4">
<div>
<p>
Card content
</p>
</div>
</div>
</div>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: red;
height: 100vh;
}
.top-nav {
width: 100vw;
display: flex;
flex-direction: column;
}
.menu-nav {
width: 100vw;
background: green;
height: 20vh;
float: left;
}
.content-nav {
width: calc(100vw - 100px);
background: yellow;
height: 100vh;
}
You just need to add one property in ".content-nav" and also add clearifx class in the parent of both tag (.menu-nav, .content-nav)
<div class="top-nav clearfix">
.menu-nav {
width:60px;
background: green;
height: 100vh;
float: left;
}
.content-nav {
width: calc(100vw - 60px);
background: yellow;
height: 100vh;
float: left;
}
Whenever you use rows and columns, please check if you have at least one container that contains them. The gap you see on the right is caused by the negative margins from the rows.
The easy fix is to have .container-fluid on or inside menu and content nav.
On menu and content nav
<div class="top-nav">
<div class="menu-nav container-fluid">
...
</div>
<div class="content-nav container-fluid">
...
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/x9d3bvLp/8/
Inside menu and content nav
<div class="top-nav">
<div class="menu-nav">
<div class="container-fluid">
...
</div>
</div>
<div class="content-nav">
<div class="container-fluid">
...
</div>
</div>
</div>
demo: https://jsfiddle.net/davidliang2008/x9d3bvLp/7/
You don't need to calculate the width for content-nav as fluid container will set its width to 100%:
.content-nav {
/*width: calc(100vw - 60px);*/
background: yellow;
height: 100vh;
}
Simple yet can't figure it out. Hot can I make 2 sidebar boxes one at the top and one bellow. Here is demo
http://jsfiddle.net/logintomyk/fQPse/
<div id="sidebar">
Text<br/>Sidebar
</div>
<div id="sidebar">
Text<br/>Sidebar
</div>
Those two sidebar divs.
Wrap the sidebars with a parent element which you add the float:right CSS too
#wrapper {
width: 90%;
}
#header {
width: 100%;
height: 50px;
background-color: lightblue;
}
#content {
/* *** I want something that will change width to fill blank space when the user re-sizes the browser and the sidebar moves *** */
margin-top: 4px;
background-color: yellow;
}
#content >p {
margin-right: 100px;
margin-top: 0px;
}
.sidebarGroup {
width: 100px;
float: right;
}
.sidebar {
width: 100px;
margin-top: 4px;
background-color: pink;
}
#footer {
width: 100%;
height: 40px;
margin-top: 4px;
background-color: red;
}
<div id="Wrapper">
<div id="header">
header
</div>
<div class="sidebarGroup">
<div class="sidebar">
Text
<br/>Sidebar
</div>
<div class="sidebar">
Text
<br/>Sidebar
</div>
</div>
<div id="content">
<p>
Stuff
<br/>text
<br/>Just to fill some space
</p>
</div>
<div id="footer">
footer
</div>
</div>
This is practically what frameworks like Bootstrap were made for, but:
<div id="page">
<div id="header">
header
</div>
<div id="content-wrapper">
<div id="sidebar">
<div class="sidebar-box">
I am sidebar content
</div>
<div class="sidebar-box">
I am also sidebar content
</div>
</div>
<div id="content">
Stuff<br/>text<br/>Just to fill some space
</div>
<div class="clearfix">
</div>
</div>
<div id="footer">
footer
</div>
</div>
and then:
#header {
background: red;
}
#content {
background: blue;
width: calc(100% - 104px);
}
#sidebar {
width: 100px;
float: right;
}
.sidebar-box {
background: green;
}
#footer {
background: yellow;
margin-top: 4px;
}
#content-wrapper {
margin-top: 4px;
}
#content:after {
content:'';
display:table;
clear:both;
}
does the trick!
Fiddle here: http://jsfiddle.net/7pcLks4m/
I am new to this, so the page is for practice. I can't seem to get the "p" or "h1" tags to show up in, what should be the middle of my page. Here is my html code:
<body>
<div class="container">
<div id="top">
<div id="bottom">
<div id="left">
<div id="right">
</div>
<!--Attempted to use a p tag here -->
<!--right div end-->
</div>
<!--left div end-->
</div>
<!--bottom div end-->
</div>
<!--top div end-->
</div>
<!--container div end-->
<!--Attempted to use a p tag here as well thinking it may show up in a different location-->
</body>
My CSS looks like this:
#top,
#bottom,
#left,
#right {
background: #666666;
position: fixed;
}
#left,
#right {
top: 0;
bottom: 0;
width: 100px;
}
#left {
left: 0;
}
#right {
right: 0;
}
#top,
#bottom {
left: 0;
right: 0;
height: 100px;
}
#top {
top: 0;
}
#bottom {
bottom: 0;
}
If anyone could let me know what I am doing wrong it would be very appreciated. I tried to mess with the positioning a bit with no luck, and I also attempted to give the p tags a z-index but I don't know if that was even something that could have worked properly to begin with.
This is a perfectly acceptable and simpler way to achieve what you want.
body {
background-color: #666666;
width: 100%;
margin: 0;
}
#container {
background-color: blue;
width: 80%;
height: 100px;
margin: auto;
}
h1 {
text-align: center;
}
p {
text-align: center;
}
<body>
<div id="container">
<h1>HEADER 1</h1>
<p>PARAGRAPH 1</p>
</div>
</body>
Go with float and clear in the css segments
<html>
<head>
<style type="text/css">
#wrapper{background-color:red;width:100%; margin: auto;}
#top{background-color:blue; height:100px;}
#left{background-color:green; width:10%; height:100px;float:left;}
#right{background-color:yellow; width: 10%; height:100px;float:right;}
#bottom{background-color:grey; height:100px;clear:left;}
</style>
</head>
<body>
<div id="wrapper">
<div id="top">top</div>
<div id="left">left</div>background
<div id="right">right</div>
<div id="bottom">bottom</div>
</div>
</body>
</html>
A trick to center elements in the middle is:
#left{
margin-left: auto;
margin-right: auto;
}
but if you're just looking to center the <h1> or <p> then this would work:
p {
text-align: center;
}
h1 {
text-align: center;
}
How to put three divs on the same line using css?
<div style="width: 100%; height: 30%; background-color: aqua; padding: 0; margin: 0">
<div style="height: 30%; width: 20%; background-color: #ffd800; margin-left: 0%;padding:0;margin-top:0">
<%--left--%>
</div>
<div style="height: 30%; width: 60%; background-color: #4cff00; margin-left: 20%;padding:0;margin-top:0">
<%--center--%>
</div>
<div style="height: 30%; width: 20%; background-color: #ffd800; margin-left: 80%;padding:0;margin-top:0">
<%--right--%>
</div>
</div>
Edit:
You can use display: flex; and there won't be any white space
JS Fiddle
.container {
display: flex;
}
.box {
width: 20%;
background-color: yellow;
text-align: center;
}
#center {
background-color: green;
width: 60%;
}
<div class="container">
<div class="box">
<%--left--%>
</div>
<div class="box" id="center">
<%--center--%>
</div>
<div class="box">
<%--right--%>
</div>
</div>
Remove all inline styles (except widths) and use simply:
<style>
div {overflow: hidden}
div > div {float: left;}
/* remove these lines, just for test */
div > div {background: yellow}
div + div {background: green}
div + div + div {background: red}
</style>
<div>
<div style="width: 20%;">
<%--left--%>
</div>
<div style="width: 60%;">
<%--center--%>
</div>
<div style="width: 20%;">
<%--right--%>
</div>
</div>
http://jsfiddle.net/qukpcq8f/
I've left widths as inline styles, I mean it's easier to you to understand. You should move them into external styles.
I'm trying to put some divs on the website, so it looks neat. There's one big div "container" and inside we have div "head", below it there's an empty div just to separate things and underneath it there's a div "content". My problem is: "head" is easily centered with "margin: 0 auto;", but the same line doesn't work in "content".
#container
{
background-color: darkorange;
width: 70%;
height: 800px;
margin-left: auto;
margin-right: auto;
}
#head
{
background-color: lightblue;
width: 95%;
height: 80px;
margin: 0 auto;
}
.space
{
width: auto;
height: 10px;
background-color: red;
}
#content
{
background-color: forestgreen;
width: 95%;
height: 600px;
margin: 0 auto;
}
<div id="container">
<div id="head">
<div id="reg_welcome">
</div>
<div id="logo">
</div>
<div id="login_out">
</div>
</div>
<div class="space">
</div>
<div id="content">
</div>
<div class="space">
</div>
<div id="footer">
</div>
</div>
Any idea why? (the colors are there just to see how it looks, please just ignore them)
And the second question, similar problem. Inside "head" there are three small divs that I want to float to left. Two of them behave as I want, the first one isn't even showed on the website. Here's the css for those three bits:
#reg_welcome
{
background-color: royalblue;
float: left;
width: 100px;
height: 75px;
margin-right: 40px;
}
#logo
{
background-color: springgreen;
width: 300px;
height: 75px;
float: left;
}
#login_out
{
background-color: teal;
float: left;
width: 120px;
height: 75px;
margin-left: 40px;
}
<div id="container">
<div id="head">
<div id="reg_welcome">
</div>
<div id="logo">
</div>
<div id="login_out">
</div>
</div>
<div class="space">
</div>
<div id="content">
</div>
<div class="space">
</div>
<div id="footer">
</div>
</div>
The oddest thing is here it all seems to work perfectly, but when ran on localhost, I have the problems I mentioned. Any idea why it happens?