I want my div layout to have a minimum height. There's left panel and content. I can set up same min height for each div, but when there's more stuff in content than in leftpanel, content will be higher while leftpanel will stay at minimum height. I want them to be at equal height all the time. I've created a div container that has minimum height and inside it there are content and leftpanel with height set to 100%, but instead the layout is higher than screen, even with container min height as low as 200px.
Here is the code:
<html><head>
<title>mysite</title>
<style>
body {width: 900px; text-align: center; margin-left: auto; margin-right: auto; background-color:#66FFFF;}
div.container { min-height: 200px; }
div.logo { height:146px; width:100%; background-image: url("http://localhost/cms/images/header.png");}
div.links{ height:30px; width:100%; background-color: #0066CC; }
div.leftpanel { width: 25%; float:left; height:100%; background: #85FF5C; }
div.content { width: 75%; height:100%; float: left; background: white; }
a { text-decoration: none; font-weight: bold; color: #000080; }
a:hover { color: #FFA500; }
div.news { margin-left: 20px; margin-right:20px; padding: 25px; }
div.newstitle { text-align: center; color: #FFA500; font-weight: bold; }
div.newscontent { text-align: justify; margin-left:0px; font-size: 12px;}
</style>
</head>
<body>
<div class="logo"></div>
<div class="links">
HOME
</div>
<div class="container">
<div class="leftpanel">Stuff</div>
<div class="content">stuff</div>
</div>
</body>
</html>
This is an issue of equal heights for each column (divs). Look at this article http://css-tricks.com/fluid-width-equal-height-columns/ they explain multiple solutions for doing this. But it is not just straight forward, unfortunately :(
Update 1
Like they also write in the article, then css flexbox (stretch) is a good solution to solve this issue, http://css-tricks.com/snippets/css/a-guide-to-flexbox/, the only disadvantage is that is not supported in all browsers (http://caniuse.com/flexbox)
You need to add overflow property to div.content. This overflow property need to have value scroll
div.content { width: 75%; height:100%; float: left; background: white; overflow:scroll;}
Related
I am trying to put a background picture below the header. The picture is supposed to cover all the width and height, but should not cover the header. However, the background picture does not show up. What’s wrong in my code?? Thank you for taking your time My codes are below;
Part of my html is below;
<body>
<header>
<p class="btn1"><img src="images/thumb2.jpg" class="skypic" alt="skypic"><span class="stext">picA</span></p>
<p class="btn2"><span class="king"><img src="images/king.png"></span><img src="images/B.jpg"></p>
</header>
<div id="wrapper" class="stampwrap">
</div>
</body>
and part of my css is below;
body{
font: 14px/1.6 sans-serif;
color:#313131;
background: #67b2e4;
}
header{
display: block;
overflow: hidden;
height: 80px;
background: #67b2e4;
padding: 2% 4%;
}
.btn1{
float:left;
}
.btn1 .stext {
font-size: 2rem;
font-weight: bold;
padding-left: 20px;
float:right;
margin-top: 20px;
}
.btn2{
float: right;
}
.skypic{
height: 80px;
width: auto;
}
#wrapper{
height: 100%;
width:100%;
background: url(images/zzz.jpg);
}
.stampwrap{
position: relative;
}
You need to define the height of the body element. the wrapper class has no space to be viewed. height:100%; cannot be seen in a parent body element with height:0px; which is the default if not defined.
I have two DIVs (Nav and Main). When their widths add to 100%, the second always floats underneath the first. If I change the first DIV's width to 19% and the second to 79%, they float side by side but with a 2% strip of white space to the right.
How can I get the 2 DIVs to sit side by side (even after resizing the window) so they combine to fill 100% of the page width?
Here is the code and it is being tested in Chrome:
<html>
<head>
<title>Space</title>
<style>
#header h1 {
text-align: center;
font-size: 40pt;
font-family: Century Gothic;
}
#header {
background: aqua;
}
#nav {
height: 100%;
width: 19%;
float: left;
background: lightblue;
}
#nav p {
font-size: 20pt;
font-family: Century Gothic;
color: yellow;
}
#main {
float: left;
padding-left: 20px;
background: linear-gradient(white, blue);
width: 79%;
height: 100%;
}
</style>
</head>
<body>
<div id="header">
<br>
<h1>All About Space</h1>
<br>
</div>
<div id="nav">
<p>Mercury</p>
<p>Venus</p>
<p>Earth</p>
<p>Mars</p>
<p>Saturn</p>
<p>Jupiter</p>
<p>Uranus</p>
<p>Neptune</p>
</div>
<div id="main">
<h3>This website is all about space</h3>
<img src="http://marshall.org/wp-content/themes/marshall/img/featured-space-policy.jpg" alt="" height="200px" width="400px">
<p>Clicking on the links to the right and you will learn all about the planets of the solar system</p>
<p>Maybe one day we will all be able to visit some of them!</p>
</div>
</body>
</html>
Problem here you are using box-sizing: content-box (default value) so you need careful about padding, margin calculation if px used at some point different browser size will break the layout. we have to you use proper percentage value for all layout property like padding, margin, border etc.
* {
box-sizing: border-box;
}
#nav {
height: 100%;
width: 20%;
float: left;
background: lightblue;
}
#main {
float: left;
padding-left: 20px;
background: linear-gradient(white, blue);
width: 80%;
height: 100%;
}
This will give you the expected result
#nav {
height: 100%;
width: 19%;
float: left;
background: lightblue;
}
#nav p {
font-size: 20pt;
font-family: Century Gothic;
color: yellow;
}
#main {
float: left;
background: linear-gradient(white, blue);
width: 81%;
height: 100%;
}
img{
max-width:100%;
}
remove padding-leftof the main div, and make IMG's max-width:100%
I need two divs next to each other so I had to put them in a wrapper. I want the outer div's height to be set by using the taller of the two div's wrapped inside. The height does seem to portray that quality when I use height:auto; for the outer div. However, the shorter of the two div's does not fill the entire height and it is not the same height as the other column. Does anybody know any CSS tricks to get this to work?
This CSS is as follows:
html, body {
background-color: #888888;
color: #98012E;
font-family: arial;
font-size: 18;
}
h1 {
font-size: 48;
text-align: center;
}
h2 {
font-size: 36;
}
.wrapped {
width:95%;
border-style: solid;
border-width: 5px;
border-color: black;
overflow: hidden;
color:black;
margin:5px;
height: auto;
}
.post {
width: 50%;
float: left;
overflow:hidden;
}
.bully {
background-color: green;
width: 50%;
float:right;
overflow: hidden;
text-align: center;
}
The html is as follows:
![<html>
<head><link rel="stylesheet" type = "text/css" href = "style.css"></link></head>
<body>
<div class="wrapped">
<div class="post"> Q: WHAT'S GOING ON??? <br/> A: I HAVE NO IDEA!!! </div>
<div class="bully">55.55</div>
</div>
</body>
</html>]
Image
I have attached an image of one example of this. Because of the sensitive nature of the other examples, I can provide you with any others. Thanks in advance!
What you need is adding extra div to make it seems same height.
The HTML:
<div class="wrapped2">
<div class="wrapped1">
<div class="post">Q: WHAT'S GOING ON???
<br/>A: I HAVE NO IDEA!!!</div>
<div class="bully">55.55</div>
</div>
</div>
Add some css like this:
html, body {
background-color: #fff;
color: #98012E;
font-family: arial;
font-size: 18;
}
h1 {
font-size: 48;
text-align: center;
}
h2 {
font-size: 36;
}
.wrapped2{
float:left;
width:100%;
background:green;
position:relative;
right:40%;
overflow:hidden;
position:relative;
}
.wrapped1 {
float:left;
width:100%;
background:red;
position:relative;
right:30%;
}
.post {
height:auto;
float: left;
overflow:hidden;
background:red;
position:relative;
left:70%;
}
.bully {
position:relative;
left:70%;
}
The point is position:relative.
And taraa...something like this will approaching.
Hope it will work for you.
I've been trying to find a solution to this for days, but haven't found anything that works.
I thought I'd finally make an account on this great website, so here goes:
I am trying to have a div expand from left to right, with 170px of clearance on both sides.
However, when there is no content on the page, or only a few words, the div doesn't expand.
I've tried to add width: 100% in several different divs to try and have them take up the full space, but that either does nothing, or completely busts the page layout. for example, instead of filling out the page, the div that's supposed to hold the content moves off the right side of the screen, and also doesn't leave the 170px margin.
I hope you can be of help, my code is posted below:
Thanks in advance,
Chris
the html:
<html>
<body>
<div id="wrapper">
<div id="pagetopwrap">
</div>
<div id="pagemainliquid">
<div id="pagemainwrap">
<div id="content">
<div id="headerwrap">
<div id="header_left">
</div>
<div id="header_main">
<div id="logo_row">
<p id="logotext">Site Title</p>
</div>
<div id="menu_row">
<!-- irrelevant menu button code -->
</div>
</div>
<div id="header_right">
</div>
</div>
<div id="contentbody">
<div id="contenttext">
<p id="contenttextmakeup">Lorum Ipsum Dolor Sit Amet</p>
</div>
</div>
</div>
</div>
</div>
<div id="leftcolumnwrap">
<div id="leftcolumn">
</div>
</div>
<div id="rightcolumnwrap">
<div id="rightcolumn">
</div>
</div>
<div id="footerwrap">
<div id="footer">
</div>
</div>
</div>
</body>
</html>
the css:
It is not ordered too well, the uninteresting sides, top and footer are first, and the main part of the website at the bottom
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
background-color: #0f0f0f; /* is normally an image */
}
#wrapper {
width: 100%;
min-width: 960px;
max-width: 1920px;
margin: 0 auto;
height: 100%
}
#pagetopwrap {
height: 50px;
width: 100%;
float: left;
margin: 0 auto;
}
#pagemainliquid {
float: left;
}
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
}
#leftcolumnwrap {
width: 170px;
margin-left:-100%;
float: left;
}
#leftcolumn {
margin: 5px;
}
#rightcolumnwrap {
width: 170px;
margin-left: -150px;
float: left;
}
#rightcolumn {
margin: 5px;
}
#footerwrap {
width: 100%;
float: left;
margin: 0 auto;
clear: both;
bottom:50px;
}
#footer {
height: 0px;
margin: 5px;
}
#headerwrap {
width: 100%;
margin: 0 auto;
}
#header_left {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
float:left;
}
#header_right {
background-color: #ff0000; /* is normally an image */
width:25px;
height:200px;
margin-left: 0px;
float:right;
position:relative; top:-200px;
}
#header_main {
background-color: #00ff00; /* is normally an image */
margin-left: 25px;
margin-right: 25px;
height:200px;
background-size: 100% 200px;
}
#contentbody {
background-color: #E2E2E2;
border-radius: 10px;
margin-top:10px;
border: 1px solid #A7A7B2;
}
#contenttext {
margin-left:10px;
margin-right:10px;
}
#logo_row {
height:150px;
width:100%;
float:left;
}
#logotext {
margin-top:20px;
margin-left:10px;
vertical-align: middle;
font-size: 55px;
font-family: "Arial Black", Arial;
}
#contenttextmakeup {
margin-top:12px;
margin-left:10px;
vertical-align: middle;
}
#menu_row {
width:100%;
}
button.menubutton {
/* irrelevant button markup */
}
http://jsfiddle.net/w9qLh6tp/ if that helps, I've seen it a lot around here :)
Instead of using !important, save yourself a headache in figuring out why important works.
CSS = cascading style sheets. You have a selector with more specificity which is why your width property isnt changing. Figuring out the route of the problem will save you time in the future when this happens again (and it will)
For example, if I styled something like so
#container .red { width: 50% }
updating the style using .red without the #container in front of it has less specificity. So if they are both modifying the same property, the one with more prevalence will take effect. This is true for media queries as well.
Fixed here http://jsfiddle.net/w9qLh6tp/1/
#pagemainwrap {
margin-left: 170px;
margin-right: 170px;
float: left;
width: 100% !important; // set it highest priority
border: 3px red solid; // border is set just for demonstration
}
set the width to be 100% with priority (!important) that will override any other css styling.
Here is my HTML:
<body>
<nav>
<div id="navBar">
<ul>
<li>ESILEHT</li>
<li>UUDISED</li>
<li>ÜLEVAATED/ARVUSTUSED</li>
<li>LOGI SISSE</li>
</ul>
</div>
</nav>
<div class="content">
<div id="logo">
<img src="http://i.imgur.com/Y4g5MOM.png" alt="Gaming website logo" height="84" width="540"/>
</div>
<div id="tervitus">
<h3 id="tere">TERE TULEMAST</h3>
</div>
</div>
<div class="artikkel">
<p>check check</p>
</div>
<footer>©2014 Janno.</footer>
</body>
</html>
Here is my CSS:
#navBar{
width: 100%;
float: left;
position: absolute;
top: 0;
background-color: #000000;
left: 0;
min-width:760px;
}
#navBar ul{
list-style:none;
margin: 0 auto;
}
#navBar li{
float: left;
}
#navBar li a:link , a:visited{
font-size: 90%;
display: block;
color: #ffffff;
padding: 20px 25px;
font: 18px "open sans", sans-serif;
font-weight: bold;
text-decoration: none;
}
#navBar li a:hover{
background-color: #F0F0F0;
color: #000000;
text-decoration: none;
}
#logimine{
}
body{
margin: 15px;
padding: 15px;
background-color: #F0F0F0;
min-width: 700px;
}
.content, .artikkel{
max-width: 65%;
margin: 1em auto;
box-shadow: 0 3px 7px rgba(0,0,0,.8);
background-color: #ffffff;
padding: 3em;
padding-bottom: 350px;
margin-bottom:50px;
}
#tervitus{
background-color: black;
color: white;
font: 18px "open sans", sans-serif;
font-weight: bold;
}
#tere{
margin-left: 5px;
}
#logo{
}
#regnupp{
color: blue; /*miks see valge on muidu*/
}
.uudised{
max-width: 65%;
margin: 4em auto;
box-shadow: 0 3px 7px rgba(0,0,0,.8);
background-color: #ffffff;
padding: 3em;
padding-bottom: 350px;
margin-bottom:50px;
}
.uudised{
padding-left: 115px;
}
.uudised img{
float: left;
width: 100px;
margin-left: -75px;
}
.uudised p, h2{
margin-left: 50px;
}
.uudised hr{
margin-top: 50px;
margin-bottom: 50px;
}
footer {
text-align: center;
margin: 0 auto -40px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
font-weight:300;
color:#ffffff;
background-color:#000000;
}
If I understand correctly, the <footer>, when using width: 100%; looks like the width of the <body> element, so I tried quite a few things and nothing. This is my first try at a webpage, so is there anything I can do, to have the <footer> use the entirety of the page width, without drastically changing everything?
Make sure that firstly your css is set up properly such as:
body {
margin: 0;
}
then your footer css should be something like this:
.footer {
margin: 0;
width: 100%;
height: 120px;
background-color: red;
}
This should work obvious then your html should be something like:
<html>
<body>
<div class="footer">
</div>
</body>
</html>
Hope this helps!
JsFiddle
I added extra styles to the JSFiddle for presentation and proof, but the code works the same without.
Do this:
HTML
<body>
<footer>Hi</footer>
</body>
CSS
html,body{
width:100%;
height:100%;
marging:0;
}
footer{
height:120px;
width:100%;
position:absolute;
bottom:0;
}
Block level elements
To understand this issue you need to understand about display:block. Block level elements (elements which declare display:block) by default take up the full width of their containing element.
In this case, the footer is, in all newish browsers, a block level element, and so will take up the full width of its container, in this case the body. There is no need to set width:100%;
Older browsers
In older browsers, the newer HTML5 elements, including block, are inline by default, so you need to set them to be block level in your CSS, like so:
footer {
display:block;
}
This is good practice.
Floats
There are several things which can get in the way of this behaviour, notably floats. If you float an element, to the left or right, it will become as narrow as it possibly can, while still enclosing it’s contents. This may or may be your issue here.
Do please post your code.
set footer width to viewport width width: 100vw;, and add the viewport meta tag to your header:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
There is a good full width and sticky to bottom (if you need) solution:
<div class="content">
<!-- content here -->
<div class="hfooter">
<!-- For Content not to lay under the Footer -->
</div>
</div>
<div class="footer">
<!-- footer content here -->
</div>
and CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
.content {
height: 100%;
}
.hfooter {
height: 100px;
}
.footer {
height: 100px;
margin-top: -100px;
}
Hope it is that what you need)
DEMO here: http://jsfiddle.net/verber/63gbg/11/