how can i add 3 columns in an html page using css? - html

I want to add 3 vertical columns in a html page:
#navbar {width:15%}
#content {width:70%}
#right {width:15%}
This is the stylesheet that I used to do so:
#container {
position: fixed;
float: none;
overflow: visible;
height: auto;
width: 100%;
border: none;
margin-left: 0%;
margin-right: 0%;
padding-left: 0%;
padding-right: 0%;
}
#navbar {
float: left;
display: block;
position: relative;
text-align: justify;
width: 15%;
background: black;
}
#content {
float: none;
display: block;
position: static;
background-size: 100%;
width: 75%;
margin-left: 15%;
right: 10%;
bottom: 0;
padding: 0;
}
#right {
float: right;
display: block;
position: static;
text-align: justify;
width: 10%;
background: black;
left: 85%;
}
.page {
position: fixed;
margin-left: 0%;
margin-right: 0%;
padding-left: 0%;
padding-right: 0%;
}
<div class="page">
<div id="container">
<div id="navbar">
navbar
</div>
<div id="content">
content
</div>
<div id="right">
<form action="SessionDestroy" method="POST">
right panel
</form>
</div>
</div>
</div>
Even though the margin is set as 0%, every time I run run this code. There is a space between the main display and the container.
So, how can I solve this problem?


HTML
<body>
<div class="page">
<div id = "container">
<div id = "navbar">
navbar
</div>
<div id = "content">
content
</div>
<div id = "right">
<form action="SessionDestroy" method="POST">
right panel
</form>
</div>
</div>
</div>
</body>
CSS
body{margin:0px;}
#container{
position: fixed;
float:none;
overflow: visible;
height: auto;
width: 100%;
border: none;
margin-left: 0%;
margin-right: 0%;
padding-left: 0%;
padding-right: 0%;
}
#navbar{
float: left;
display:block;
position:relative;
text-align: justify;
width: 15%;
background: black;
}
#content{
float: left;
display: block;
position: static;
background-size:100%;
width: 70%;
right: 10%;
bottom: 0;
padding: 0;
text-align:center
}
#right{
float: right;
display:block;
position: static;
text-align: justify;
width:10%;
background: black;
left: 85%;
}
.page{
position: fixed;
margin-left: 0%;
margin-right: 0%;
padding-left: 0%;
padding-right: 0%;
}


The problem seems to be margin: 8px on the body
Due to which the available area for the container is 100% - 8px, which is why there is a gap of 8px.
Try using body{margin:0px;}
Hope this helps.


This will work.
#content {
/*float: none;*/
display: block;
float: left; /* Add this line */
position: static;
background-size: 100%;
width: 75%;
/*margin-left: 15%;*/
right: 10%;
bottom: 0;
padding: 0;
}

Related

How to set margin between fixed header and footer in print page?

in my html, Header and Footer are fixed but body content overlaps with header and footer. I want to display my content between header and footer without overlap. How can it be achieved ?
Please help me regarding this.i'm using this CSS code mentioned below.
You may check it and resolve this problem.
<style type="text/css">
#media print {
#header {
display: table-header-group;
position: fixed;
top: 0;
left: 0;
margin: 0px;
padding: 0px;
width: 100%;
}
#body {
/*position: absolute;
height: 80%;
margin-top: 0em !important;
margin-bottom: 1em !important;
padding: 2em 0 0 0;
margin:0 auto;*/
position: absolute;
margin-top: 10% !important;
margin-bottom: 5% !important;
height: 80%;
overflow: visible;
text-align: justify;
width: 90%;
}
#footer {
display: table-footer-group;
position: fixed;
bottom: -0.6em;
left: 0;
margin: 5em 0px 0px 0px;
padding: 0px;
width: 100%;
/*clear:both;*/
/*padding-top:98%;*/
/*padding-bottom:1em;*/
/*page-break-after: avoid;*/
}
}
#media screen {
#thead {
display: block;
/*padding-right: 5.9em;
padding-left: 6px;*/
width: 100%;
/*height: 5%;*/
}
#tbody {
display: block;
/*height: 80%;
vertical-align: central;
padding-top: 5em;
padding-bottom: 3em;*/
text-align: justify;
width: 100%;
margin-top: -5em;
}
#tfoot {
display: block;
/*padding-right: 6em;
padding-top: 2em;*/
width: 100%;
/*height: 4%;*/
}
}
</style>

This snippet shows an example of fixed header and footer (with variable height) and content that takes the remaining space. The trick here is to use flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
body {
overflow: hidden;
}
.content-container {
display: flex;
flex-direction: column;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#header {
position: relative;
width: 100%;
background-color: green;
}
#body {
position: relative;
width: 100%;
background-color: blue;
overflow: auto;
}
#footer {
position: relative;
width: 100%;
background-color: red;
}
<div class="content-container">
<div id="header">
<div style="height: 40px;"></div>
</div>
<div id="body">
<div style="height: 1000px;"></div>
</div>
<div id="footer">
<div style="height: 20px;"></div>
</div>
</div>

Why a gap between ul li [duplicate]

This question already has answers here:
How to remove the space between inline/inline-block elements?
(41 answers)
Closed 6 years ago.
In the following code, I am not able to understand that why is there a small margin between the green li's Home , Products , Services , About Us, Contact
I have set the margin and padding to 0px in both .ul and .li properties. Then why is there a gap between the green li's?
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(173,192,241,1);
}
.wrapper {
height: 725px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
/* [disabled]background-color: rgba(15,26,155,1); */
margin-right: auto;
position: relative;
}
.topimage {
width: 100%;
max-width: 960px;
height: 100%;
max-height: 175px;
/* [disabled]background-color: rgba(0,102,204,1); */
position: absolute;
/* [disabled]border: thin solid rgba(255,0,0,1); */
}
.topimage img{
max-width: 100%;
max-height: 100%;
/* [disabled]margin-bottom: -9px; */
display: block;
margin-right: auto;
margin-left: auto;
border-radius: 15px 15px 0px 0px;
}
.menu {
background-color: rgba(15,26,155,1);
height: 100%;
max-height: 50px;
max-width: 960px;
position: relative;
top: 175px;
}
.list {
color: rgba(0,0,0,1);
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: rgba(255,0,0,1);
padding: 0px;
}
.list li {
display: inline-block;
margin-right: 0px;
margin-left: 0px;
width: auto;
text-align: center;
background-color: rgba(204,255,0,1);
position: relative;
padding: 0px;
}
.content {
width: 100%;
height: 500px;
background-color: rgba(20,35,214,1);
position: relative;
top: 175px;
padding-right: 0.5%;
padding-left: 0.5%;
}
.leftcontent {
background-color: rgba(210,238,252,1);
float: left;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 85%;
top: 0px;
position: relative;
border-left-color: rgba(205,205,205,1);
/* [disabled]margin-left: 0.3%; */
}
.rightcontent {
background-color: rgba(51,177,236,1);
float: right;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 15%;
position: relative;
top: 0px;
/* [disabled]margin-right: 0.3%; */
}
.footer {
}
<div class="wrapper">
<div class="topimage">
</div>
<div class="menu">
<ul class="list">
<li>Home</li>
<li>Products</li>
<li>Services</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
<div class="content">
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>
</div>

If you have no new lines between the list elements then it works. So you could put all on one line (see snippet) or add font-size: 0; to the <ul>
ul {font-size:0;}
*{
box-sizing:border-box;
}
html,body {
margin: 0px;
height: 100%;
width: 100%;
left: 0px;
top: 0px;
background-color: rgba(173,192,241,1);
}
.wrapper {
height: 725px;
max-width: 960px;
margin-left: auto;
left: 0px;
top: 0px;
/* [disabled]background-color: rgba(15,26,155,1); */
margin-right: auto;
position: relative;
}
.topimage {
width: 100%;
max-width: 960px;
height: 100%;
max-height: 175px;
/* [disabled]background-color: rgba(0,102,204,1); */
position: absolute;
/* [disabled]border: thin solid rgba(255,0,0,1); */
}
.topimage img{
max-width: 100%;
max-height: 100%;
/* [disabled]margin-bottom: -9px; */
display: block;
margin-right: auto;
margin-left: auto;
border-radius: 15px 15px 0px 0px;
}
.menu {
background-color: rgba(15,26,155,1);
height: 100%;
max-height: 50px;
max-width: 960px;
position: relative;
top: 175px;
}
.list {
color: rgba(0,0,0,1);
text-decoration: none;
margin-right: auto;
margin-left: auto;
background-color: rgba(255,0,0,1);
padding: 0px;
}
.list li {
display: inline-block;
margin-right: 0px;
margin-left: 0px;
width: auto;
text-align: center;
background-color: rgba(204,255,0,1);
position: relative;
padding: 0px;
}
.content {
width: 100%;
height: 500px;
background-color: rgba(20,35,214,1);
position: relative;
top: 175px;
padding-right: 0.5%;
padding-left: 0.5%;
}
.leftcontent {
background-color: rgba(210,238,252,1);
float: left;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 85%;
top: 0px;
position: relative;
border-left-color: rgba(205,205,205,1);
/* [disabled]margin-left: 0.3%; */
}
.rightcontent {
background-color: rgba(51,177,236,1);
float: right;
height: 100%;
max-height: 500px;
width: 100%;
max-width: 15%;
position: relative;
top: 0px;
/* [disabled]margin-right: 0.3%; */
}
.footer {
}
<div class="wrapper">
<div class="topimage">
</div>
<div class="menu">
<ul class="list">
<li>Home</li><li>Products</li><li>Services</li><li>About Us</li><li>Contact</li>
</ul>
</div>
<div class="content">
<div class="leftcontent">
</div>
<div class="rightcontent">
</div>
</div>
</div>

Try this -
.list li {
float: left;
list-style: none;
width: auto;
text-align: center;
background-color: rgba(204,255,0,1);
position: relative;
}
Replace with above css with your existing .list li class

You can remove space created by inline-block element as with following trick.
Or you can use float instead of inline-block.
.list {
letter-spacing: -4px;
font-size: 0;
}
.list li {
display: inline-block;
vertical-align: top;
letter-spacing: 0;
font-size: 14px;
}
Or you can use float:
.list {
overflow: hidden;
}
.list li {
float: left;
}

Just add this into your code,
.list{
font-size:0;
}
.list li{
font-size:20px;
padding:0px 0px 0px 10px;
}

Elements display in front of their container, but can't be interacted with

I'm currently working on a website and have encountered an interesting problem. I have a container which holds my navbar. For some reason, this container displays behind its contents (Which it should) but mouse interaction acts as if it's in front of its contents.
JSFiddle of my current code
https://jsfiddle.net/qzsxpgrq/
HTML
<div id="navbar">
<div id="bar">
<div id="navLeft">
<div class="navL navbutton">About</div>
<div class="navL navbutton">The Team</div>
</div>
<div id="navLogo">
<div id="logo">
<img src="http://www.epicyoobed.com/res/img/navLogo.png"/>
</div>
</div>
<div id="navRight">
<div class="navR navbutton">Programs</div>
<div class="navR navbutton">Contact</div>
</div>
</div>
</div>
CSS
html {
height: 100%;
font-family: arial;
}
body {
margin: 0;
padding: 0;
background-color: #BBB;
}
#navbar {
margin: 0;
padding: 0;
height: 80px;
width: 100%;
position: fixed;
display: block;
z-index: 1;
}
#bar {
display: block;
position: fixed;
width: 100%;
height: 40px;
background-image: url("http://www.epicyoobed.com/res/img/nav.png");
}
#navRight {
margin: 0;
padding: 0;
height: 40px;
width: 45%;
position: absolute;
display: block;
float: left;
top: 0;
right: 0;
}
#navbar div div a {
display: block;
text-decoration: none;
padding-top: 5px;
color: #000;
width: 100%;
height: 100%;
font-size: 20px;
}
.current {
background-image: url("http://www.epicyoobed.com/res/img/nav_sel.png");
background-repeat: repeat-x;
}
.navL {
float: right;
}
.navR {
float: left;
}
.navbutton {
display: block;
position: relative;
width: 150px;
height: 100%;
text-align: center;
}
.navbutton:hover {
background-image: url("http://www.epicyoobed.com/res/img/nav_sel.png");
background-repeat: repeat-x;
}
#navLogo {
margin: auto;
height: 40px;
width: 100%;
position: absolute;
display: block;
z-index: 2;
}
#logo {
margin: auto;
height: 80px;
width: 80px;
}
#navLeft {
margin: 0;
padding: 0;
height: 40px;
width: 45%;
position: absolute;
display: block;
float: right;
}

Xetanai Try adding a z-index of 3 to the #navLeft and navRight.
#navLeft {
margin: 0;
padding: 0;
height: 40px;
width: 45%;
position: absolute;
display: block;
float: right;
z-index:3;
}
#navRight {
margin: 0;
padding: 0;
height: 40px;
width: 45%;
position: absolute;
display: block;
float: left;
top: 0;
right: 0;
z-index:3;
}
The issue you're experiencing is because the logo is 100% width and has a z-index of 2. Effectively placing it above the left and right containers.

Keep divs from stacking when browser resized

So I have a website that when it is resized the divs start to stack. I have been unable to figure out why as I am using min-width on the container.
Here is how the divs are laid out:
<div id="content">
<div id="leftColumn">
</div>
<div="content">
</div>
</div>
Here is the CSS
#container {
position: absolute;
left: 0;
top: 0;
width: 99%;
min-width: 700px;
height: 100%;
background-color: #FFFFFF;
z-index: 0;
display: inline-block;
white-space: nowrap;
}
#leftColumn {
width: 20%;
min-width: 200px;
height: 100%;
background-color: #2196f3;
color: white;
text-align: center;
float: left;
font-size: 100%;
display: inline;
}
#content {
text-align: center;
left: 0%;
height: 100%;
width: 80%;
min-width: 498px;
background-color: white;
float: left;
display: inline;
}
Any help would be greatly appreciated.

Would you be opposed to using inline-block instead of floats? Like This:
HTML
<div id="container">
<div id="leftColumn">leftcolumn</div>
<div id="content">content</div>
</div>
CSS
#container {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #FFFFFF;
z-index: 0;
display: inline-block;
white-space: nowrap;
}
#leftColumn {
min-width:200px;
height: 100%;
background-color: #2196f3;
color: white;
text-align: center;
display:inline-block;
font-size: 100%;
}
#content {
text-align: center;
min-width:200px;
width:80%;
height: 100%;
background-color: white;
display:inline-block;
}

Your wrote
<div="content"></div>
this. You missed ID declaration. It should be
<div id="content"></div>

Can't center DIV because of other divs

yesterday I posted a question asking how can I center a div inside a div... Now I have another problem, I want to center a div on the screen. I want it to be in the middle and to take up 50% of the screen;
Here is a pic of the problem:
As you can see there isn't anything in the middle of the screen, that is my problem. Here is my HTML code:
* {
font-size: 100%;
font-family: Serif;
}
body {
background: url("images/background.jpg") repeat;
font-size: 100%;
}
.items {
background-color: rgba(0,0,0,.5);
width: 100%;
text-align: center;
margin: 0;
}
#basicInfo{
background-color: rgba(255,150,0,.8);
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#basicInfo:hover{
background-color: rgba(255,150,0,1);
}
#basicInfo img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs{
background-color: rgba(255,150,0,.8);
width: 100px;
height: 100px;
display: inline-block;
margin-top: 10px;
margin-bottom: 10px;
}
#langs img{
display: block;
margin-left: auto;
margin-right: auto;
padding-top: 16px;
}
#langs:hover{
background-color: rgba(255,150,0,1);
}
.navbar {
background-color: rgba(0,0,0,0.1);
position: fixed;
bottom: 0px;
left: 0px;
right: 0px;
width: 100%;
min-height: 5%;
}
.button{
background-color: rgba(0,0,0,.5);
font-size: 2em;
color: white;
width: 33%;
margin: 0 .16%;
height: 100%;
float: left;
}
.button:hover{
background-color: rgba(0,0,0,.7);
}
.button a{
text-decoration: none;
display: block;
color: white;
text-align: center;
vertical-align: middle;
}
#textSpace {
background-color: rgba(0,0,0, .5);
width: 100%;
height: 50%;
display: block;
top: auto;
bottom: auto;
}
<title>Mateo's About Page</title>
</head>
<body>
<div class="items">
<div id="basicInfo">
<img src="images/question.png">
</div>
<div id="langs">
<img src="images/code.jpg">
</div>
</div>
<div id="textSpace">
</div>
<div class="navbar">
<div class="button">
<b>Mateo</b>
</div>
<div class="button">
<b>Home</b>
</div>
<div class="button">
<b>Josh</b>
</div>
</div>
Any help is apriciated! Thanks in advance!

To horizontally centre a div in the middle of the screen use:
margin-left:auto;
margin-right:auto;