So I have a 2 div layout where both divs background needs to be filled full height. But I can't get it right. As I have been relatively out of scripting I think there should be a new and better way then using a background image. Here is the HTML:
<div id="ContentContainer">
<div id="Menu">asdasda
</div>
<div id="Content">Content<br>M<BR><BR>dsfsdf</div>
</div>
And the css:
#ContentContainer {
width: 100%;
}
#Menu {
float: left;
width: 250px;
background-color: #bababa;
}
#Content {
overflow: hidden;
}
here is the example http://jsfiddle.net/DenErello/dzt4Y/
You use the Properties position:absolute and position:relative
Check this Answer: http://jsfiddle.net/dzt4Y/2/
Just set the min-height of html and body and your own divs.
html, body, #Menu, #Content {
min-height:100%;
}
Related
I'm trying to create three menu items evenly spaced out with some text beneath an image. Right now im just trying to get the images to accept a percentage height or width based on class name menuItem but it doesn't seem to work at all. Why is this?
html:
<div id='menu'>
<div class='menuItem'>
<img src='http://www.clker.com/cliparts/l/u/5/P/D/A/arrow-50x50-md.png' >
</div>
<div class='menuItem'>
<img src='http://www.clker.com/cliparts/l/u/5/P/D/A/arrow-50x50-md.png'>
</div>
<div class='menuItem'>
<img src='http://www.clker.com/cliparts/l/u/5/P/D/A/arrow-50x50-md.png'>
</div>
</div>
CSS:
#menu {
width: 100%;
height: 100%:
}
.menuItem {
display:inline;
width:25%;
}
Change .menuItem to display: inline-block instead because inline elements dont respect width and height. And set max-width: 100% on the images so that they are restricted by their parents size
#menu {
width: 100%;
height: 100%:
}
.menuItem {
display:inline-block;
width:25%;
}
img{
max-width: 100%;
}
FIDDLE
Here is an explanation on the different display types: https://stackoverflow.com/a/9189873/3113558
You'd have to put the class on the img tag itself, not the surrounding div, unless you are using bootstrap which it doesn't look like you are. Bootstrap would provide a few more dependencies than you have working here.
You just gave the images a max-width, not a width. Try this (Here's a fiddle)
#menu {
width: 100%;
height: 100%:
}
.menuItem {
display:inline;
width:25%;
}
#menu .menuItem img{
width:100%;
}
JsFiddle: http://jsfiddle.net/techsin/csfvb91u/
(just realized normal div is collapsing ALSO to size of content, is min height completely useless?)
I need two divs, one left, and on right. Left one is 100px wide and stays that way. While, right div expands infinitely and doesn't shrink beyond 400px. Both Divs should be the height of parent. And parent has no exact height but minimum height of 800. So if content of one of these 2 divs were to push the height of div and extend it. Then The height of parent should increase and thus also the height of other div.
I tried using floats. I managed to some extent. However left side which was on float left, its height kept collapsing and didn't follow height:100% rule. It only worked if parent had definite width.
I tried using inline block but then right div won't expand to fillin the available space..
Why in the world css doesn't have fit-content, fill-available, choose what % refers to, choose what to position against, use vector or use pngs to shape div, inset textshadow, etc.
<div class="cont">
<div class="a"></div>
<div class="b"></div>
</div>
try with display:table and display:table-cell for child you will need to give fixed with for the left div
demo - http://jsfiddle.net/z90fma6e/
html,
body {
height: 100%;
}
* {
margin: 0;
padding: 0;
}
.cont {
display: table;
height: 100%;
}
.left,
.right {
height: 100%;
}
.left {
width: 200px;
background: red;
display: block;
}
.right {
width: 100%;
display: table-cell;
background: green;
}
<div class="cont">
<div class="left">fixed
<br/>height adjusts</div>
<div class="right">expands
<br/>height adjusts</div>
</div>
Sounds like your divs are collapsing. Your going to need a clearfix you can add to divs. There are a few ways to do this; however, this option is best.
.clearfix:after {
content: ".";
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Add this clearfix class and css to your divs so they wont collapse.
You can read more about them at cssTricks
perfect use case for CSS flex layout:
<style>
body {
display: flex;
flex-direction: row;
margin: 0;
padding: 0;
}
div:first-child {
width: 200px;
background: red;
}
div:last-child {
flex: 1;
background: blue;
}
</style>
<div></div>
<div></div>
If you wish to support IE8 or earlier I would suggest you to use positioning:
Here's what I came up with
Fiddle : http://jsfiddle.net/csfvb91u/4/
If the content on the right is going out of the container, you can always use margin-right:200px as the right side container is shifted 200px using left:200px. Hope you get what I'm saying... :)
HTML:
<div class="cont">
<div class="a"></div>
<div class="b"></div>
</div>
CSS:
.a {
position:absolute;
width: 200px;
background-color: green;
height: 100%;
}
.b {
width:100%;
position:absolute;
left:200px;
background-color: blue;
height: 100%;
}
.cont {
position:relative;
border:1px solid #333;
min-height:300px;
overflow:hidden;
}
Im trying to build a layout for a site and here is my css and html.
Problem:
1.With header and navigation div, I dont use the margin merge but still feel it got merge
2.With navigation and left-nav/content divs the merge is not happening
Can someone explain whats happening?
html
<div id="container">
<div id="header">
</div>
<div id="navigation">
</div>
<div id="left-nav">
</div>
<div id="content">
</div>
</div>
css
html, body {
height: 100%;
width: 100%;
}
#container {
height: 100%;
width: 100%;
}
#header {
height: 15%;
width: 100%;
background-color:grey;
margin:1%;
}
#navigation {
height: 5%;
width: 100%;
background-color:grey;
margin:1%;
}
#left-nav {
height: 40%;
width: 20%;
background-color:grey;
margin:1%;
float:left;
}
#content {
height: 40%;
width: 70%;
background-color:grey;
margin:1%;
float:left;
}
jsfiddle
Actually all you need to do is to use a global CSS reset or
*{margin:0; padding:0;}
which will remove also the default margin the browser adds to body.
than just go all over your CSS and remove width: 100%; from your DIV elements cause they are already set to auto by default (being block-level elements).
Now that you've done that, for all other elements, all you need is some simple math...
100% - (1%(or 0.5%?) margin * 2sides * No of elements) etc :)
http://jsfiddle.net/7L98c/2/
The merge doesn't happen between navigation and left-nav/content is that you float left-nav and content. When an element is "float", margin around it would not merge with others'.
Here i want to use two buttons which cover the entire screen width and the buttons should have equal width. And alo there should not be any space between these buttons.
I tried with the following HTML and CSS codes but i didn't get what i expect;
CSS
#container
{
width:100%
}
#button1
{
width:50%;
}
#button2
{
width:50% 100%;
}
HTML
<div id="container">
<button id="button1">Button1</button>
<button id="button2">Button2</button>
</div>
I tried the code here here the buttons not covering the entire screen size also a small gap is there between these two buttons. How to tackle this issue? Thank you..
Demo: http://jsfiddle.net/abhitalks/XkhwQ/7/
Q1: buttons not covering the entire screen size
The reason(s) are:
The box-model. By default the widths are calculated exclusive of paddings. In order to be safe, you should first set the box-sizing: border-box and reset the paddings and margins.
The container is 100% of what? Better, set the width on parent i.e. body.
You can mitigate this by:
* {
margin: 0; padding: 0; box-sizing: border-box; /* reset */
}
html, body {
width: 100%; /* specify width on parent */
}
.container {
width: 100%
}
button {
width: 50%; /* make the children equal */
}
.
Q2: also a small gap is there between these two buttons
The reason is:
The buttons are intrinsically inline elements and this means the white-space counts.
You can mitigate this in two ways:
Comment out the white-space.
Set the float on buttons.
Example 1 (using comments):
<div class="container">
<button>Button1</button><!--
--><button>Button2</button>
</div>
Example 2 (using floats):
.container > button {
float: left;
}
The demo (http://jsfiddle.net/abhitalks/XkhwQ/7/) covers and illustrates both issues.
.
Both of your buttons should have a width of 50% and be floated to the left or right
#button1, #button2
{
width:50%;
float:left;
}
Use this HTML
<div id="container">
<div class="btn-box"><button id="button1">Button1</button></div>
<div class="btn-box"><button id="button2">Button2</button></div>
<div style="clear:both;"></div>
</div>
& CSS
#container{width:100%}
.btn-box{display:block; width:50%; float:left;}
.btn-box button{display:block; width:100%;}
I think there is a typo on button2 class.
#button2
{
width:50%;
}
Apply float to buttons and make them 50% width:
.container {
width: 100%;
}
#button1,
#button2 {
float: left;
width: 50%;
}
Try This
<style>
.container {
width: 100%;
}
#button1,
#button2 {
float: left;
width: 50%;
background:#dbdbdb;
}
</style>
</head>
<body>
<div class="container">
<div id="button1">First Button Text</div>
<div id="button2">Second Button Text</div>
</div>
</body>
I've seen plenty of solutions if the child div has a fixed width, but not if it is fluid.
The parent div should have a fixed height (150px) and fluid width (80%).
The child div should have a fluid height (expands with content) and fluid width (always 100%).
I want to get the child div to vertically align within the parent div. All content within the child div should also be horizontally centered.
Here's what I have right now:
http://jsfiddle.net/6986r/
<div class="s1">
<div class="centereddiv">This green div should be vertically centered.</div>
</div>
-
body, html {
height: 100%;
margin: 0;
}
.s1 {
width:100%;
height: 150px;
display: block;
background-color: red;
float: left;
}
.centereddiv {
color: black;
text-align: center;
background-color: green;
}
If you do not mind older browser, you may use the display:flex property (aside the table property already proposed by #SW4)
Notice that display:table can be used as a fall back for older browser
DEMO
Basic update to your CSS:
.parent {
display:flex;
}
.childcentereddiv {
margin:auto;
}
Likely the most flexible implementation would be to leverage display:table, however you will also need to adapt your HTML slightly and add an additional parent:
Demo Fiddle
<div class="table">
<div class="cell">
<div class="childcentereddiv">This green div should be vertically centered.</div>
</div>
</div>
CSS
body, html {
height: 100%;
margin: 0;
width:100%;
padding:0;
}
.table {
height: 150px;
background-color: red;
display:table;
width:80%;
}
.cell {
display:table-cell;
vertical-align:middle;
}
.childcentereddiv {
color: black;
text-align: center;
background-color: green;
}