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>
Related
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>
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;
}
My text is pushing div element that contains them below.
slidepassos{
position: relative;
height: 100vh;
width: 100%;
background: rgba(0,0,0,1);
float: left;
margin-top: -1px;
}
#anchorHow{
margin-top: 65px;
width: 100%;
float: left;
}
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap{
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
.passo-um{
height: 100vh;
width: 100%;
background: #000101;
}
.passoumback{
height: 100%;
width: 100%;
background-image: url("../img/passoumu.jpg");
background-position: top center;
}
.passoumgrad{
height: 100vh;
width: 100%;
background: rgba(0,37,63,0.7);
}
.passo-um h1{
color: white;
font-weight: bold;
font-size: 45px;
text-align: center;
}
.passo-um h2{
color: #EBAC00;
font-weight: bolder;
font-size: 53px;
text-align: center;
margin-top: 15px;
margin-left: 35%;
}
.passo-um p{
color: white;
padding: 18px 8%;
font-size: 20px;
font-weight: lighter;
text-align: center;
margin-top: 23px;
float: left;
}
.passoumilu {
width: 300px;
float: left;
margin-left: 9%;
margin-top: 50px;
}
.swipeleftcontent{
z-index: 1;
background-size: 60px 60px;
margin-left: 157px;
width: 60px;
height: 60px;
position: absolute;
bottom: 14%;
}
<div id="slidepassos" class="swipe slidepassos">
<div class="swipe-wrap">
<div class="mySlides">
<div class="passo-um">
<h1>How?</h1>
<h2>Step 1:</h2>
<img src="img/passoumilu.svg" class="passoumilu">
<p>Do your coach oriented WOD. Remember, know your limits and try to break them.</p>
<div class="passoumback">
<div class="passoumgrad"></div>
</div>
<img src="img/swipeleft.png" class="swipeleftcontent">
</div>
</div>
</div>
</div>
image showing the text on top of the DIV instead inside it.
example
Ive tried to mess with the floats, and inline-blocks, but nothing affects it. Dont know how to fix it.
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.
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;