I've seen there are a couple questions similar to this one but none of them seem to solve my problem.
I want a very simple design:
Two or more divs stacked on top of each other, each of them docked to the right. I'm practicing for a test on which using the float property is not allowed.
body{
width:900px;
height:850px;
margin-left:auto;
margin-right:auto;
}
#header{
width:900px;
height: 225px;
position: absolute;
right:0px;
border:1px solid black;
}
#cen{
width: 900px;
height: 240px;
position: absolute;
right:0px;
border:1px solid orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="header">
</div>
<div id="cen">
</div>
</body>
</html>
Now, when I only had one div (header), this worked, it was docked right. But when I add the 'cen' div it is also docked right but, instead of going underneath the 'header' div, it just goes over it.
Any ideas how to fix this?
Thanks.
Absolute elements won't behave in a decent manner they won't bother any blocks in their ways.
Since the element header has a height you can add the cen element under it by giving top:"whatever the height the header is"
Here the height of the header is 225px
Stack the cen in a position of top: 255px so it will be below the header.
Try this...
*{box-sizing:border-box;}
body{
width:900px;
height:850px;
margin-left:auto;
margin-right:auto;
}
#header{
width:900px;
height: 225px;
position: absolute;
right:0px;
border:1px solid black;
top:0;
}
#cen{
width: 900px;
height: 240px;
position: absolute;
right:0px;
top:225px;
border:1px solid orange;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="main.css" />
</head>
<body>
<div id="header">
</div>
<div id="cen">
</div>
</body>
</html>
Statically positioned block elements (divs) will stack like you describe by default. So there is no need for absolute positioning.
Also, there is no need to set a width because:
A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).
body {
width: 900px;
margin-left: auto;
margin-right: 0;
}
#header {
height: 225px;
border: 1px solid black;
}
#cen {
height: 240px;
border: 1px solid orange;
}
<div id="header">
</div>
<div id="cen">
</div>
You can use flexbox for something like this:
.container {
width:100vw;
display:flex;
justify-content: flex-end;
}
.column {
display: flex;
flex-direction:column;
flex-basis:33%;
}
.row {
display: flex;
background-color: red;
width: 100%;
flex-grow: 1;
height: 100px; /* can be whatever you like */
margin: .25rem;
}
<div class="container">
<div class="column">
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</div>
</div>
CSS Grid would probable work even better, but I haven't worked with it enough.
Related
I'm having an issue with my code and it seems easy but I can't get my head around it.
I'm trying to make the main div full vh so the content auto height should be 100vh - the height of the title box.
However, I keep getting the scroll bar for the length of the title box. Any fix?
Full HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
.maindiv {
min-height: 500px;
height: 100vh;
background: red;
}
.maindiv-inner {
position: relative;
height: 100%;
width: 100%;
background: blue;
}
.maindiv-inner-content {
position: relative;
height: 100%;
width: 100%;
background: yellow;
}
.titlediv {
height: 200px;
}
</style>
<div class="maindiv">
<div class="maindiv-inner">
<div class="titlediv">
Title 1
</div>
<div class="maindiv-inner-content">
</div>
</div>
</div>
</body>
</html>
You can easily solve this issue by changing some of the CSS classes like this.
body{
padding:0;
margin:0;
}
.maindiv
{
/*min-height:500px;*/
height: 100vh;
background:red;
position: relative;
}
.maindiv-inner
{
position: relative;
background:blue;
}
.maindiv-inner-content
{
position:fixed;
background:yellow;
height:100%;
width:100%;
}
.titlediv
{
height:200px;
}
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="maindiv">
<div class="maindiv-inner">
<div class="titlediv">
Title 1
</div>
<div class="maindiv-inner-content">
<div>Something in Content</div>
</div>
</div>
</div>
</body>
</html>
does the following provide what you want?
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<style>
body {
margin: 0;
}
.maindiv
{
min-height:500px;
height:100vh;
background:red;
width:100%;
background:blue;
}
.maindiv-inner-content
{
height: calc( 100% - 200px );
width:100%;
background:yellow;
}
.titlediv
{
height:200px;
}
</style>
<div class="maindiv">
<div class="titlediv">
Title 1
</div>
<div class="maindiv-inner-content">
</div>
</div>
</body>
</html>
Basically you need to remove the margin from the body, otherwise if you set the div to 100vh you will get a scrollbar.
Then you can use calc to make the height of the div you want too be 100% - height-of-titlediv.
I removed the maindiv-inner as I did not understand what it was there for, so I just thought it was unnecessary.
Also the relative positioning seemed unnecessary so I removed that as well.
simple way to achieve the bahavior is the use of either flexbox or CSS-Grid. With CSS-Grid you declared the grid as 2 rows by display: grid; grid-template-rows: min-content auto;. The title row will have the hieght min-content means that it will only take up as much height as needed or declared. The 2nd row with the hight of auto will take up all remaining height by default.
body {
margin: 0;
}
.maindiv {
background: red;
}
.maindiv-inner {
box-sizing: border-box;
height: 100vh;
display: grid;
grid-template-rows: min-content auto;
background: blue;
}
.maindiv-inner-content {
background: yellow;
}
.titlediv {
height: 100px; /* changed for demo */
}
<div class="maindiv">
<div class="maindiv-inner">
<div class="titlediv">
Title 1
</div>
<div class="maindiv-inner-content">
</div>
</div>
</div>
I have a div which contains five img tags.
Here is the html code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="CSS/style.css">
</head>
<body>
<div class="container">
<img src="Images/1.jpg"/>
<img src="Images/2.jpg"/>
<img src="Images/3.jpg"/>
<img src="Images/4.jpg"/>
</div>
</body>
</html>
Here is the stylesheet:
img
{
position:relative;
border:1px solid red;
width: 250px;
height: 150px;
margin-left:auto;
margin-right: auto;
}
.container
{
position:relative;
margin: 0 auto;
width: 80%;
border:1px solid red;
border-radius:10px;
padding:10px;
}
When I'm resizing the browser window everything got messed up.
This is the normal form
This is the form after resizing
I want pictures to stay in their places.
How can i fix this?
Add white-space:nowrap; to your .container div:
.container {
position:relative;
margin: 0 auto;
width: 80%;
border:1px solid red;
border-radius:10px;
padding:10px;
white-space:nowrap;
}
Remove position:relative and try using float:left or center
Give width of .container as pixels not as %. If you have 4 div give width(.container) as 1000px(4*250).
Salam (means hello) :)
I have the following simple layout, the problem is that adding content to right div makes content on left one come down:
JS Fiddle
<!DOCTYPE html>
<html>
<head>
<style>
.parent{
width:800px;
height:100px;
display: inline-table;
border: 1px solid #e8e8e8;
background: #fcfcfc;
}
.parent .right{
width:90px;
display:table-cell;
padding-top: 10px;
text-align: center;
background: #f5f5f5;
color:#666666;
}
.parent .left{
width:710px;
display:table-cell;
padding-top: 0px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left">
This cell has padding-top:0px
</div>
<div class="right">
<img src="images/icon.png">
<br>some text
</div>
</div>
</body>
</html>
Since you have this property display:table-cell the content inside is been vertical aligned, for default with baseline , see more here.
You can replace this value with top or middle:
.left, .right {
vertical-align:middle;
}
The demo http://jsfiddle.net/Svdm4/2/
I have an outer element that is a fixed size with a footer immediately below it. Inside the element are two sections; the first should be a fixed height and the second should expand to fill the other element but not overflow it.
Let me show you.
How do I do this? setting height: 100% on the second element causes it to oveflow the outer element and overrun the footer. The only other alternative I see is to se the height explicitly in pixels which seems like it would be a mess.
What's the right way to do this?
Edit: setting overflow-y: hidden will work in this very limited example, but its not actually limiting section.inner2 and will look weird if for example I want to give section.inner2 a border-radius
The simplest solution that I can think of (and I don't think very much) is just using position: absolute;: http://jsfiddle.net/WLZmT/3/.
HTML:
<div id="outer">
<div id="fixed">
Fixed.
</div>
<div id="fluid">
Fluid.
</div>
</div>
CSS:
#outer {
position: relative;
background: rgb(255, 200, 200);
padding: 10px;
height: 400px;
}
#fixed {
height: 100px;
padding: 10px;
background: rgb(200, 255, 200);
}
#fluid {
padding: 10px;
background: rgb(200, 200, 255);
position: absolute;
top: 100px;
bottom: 10px;
left: 10px;
right: 10px;
}
like this?
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<style media="screen" type="text/css">
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
left:50%;
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="header">
head
<!-- Header end -->
</div>
<div id="body">
<!-- Body start -->
<!-- Body end -->
</div>
<div id="footer">
<!-- Footer start -->
footer
<!-- Footer end -->
</div>
</div>
</body>
</html>
Sorry if I can't explain with code, I'm newbie with CSS. How can I do this?:
HTML code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIV issue</title>
</head>
<body>
<div id="div1">
<img src="image-800x216.gif" />
</div>
<div id="div2">
<img src="image-567x43.gif" />
</div>
</body>
</html>
Is intended to work with IE (all), Opera, Safari, Chrome and FF. Is possible or I'm dreamer?
http://jsfiddle.net/XTkA2/30/
#div1 {
position: absolute;
top: 38%;
right: 1em;
width: 62%;
max-width: 50em;
outline:#999 solid 1px;
}
#div2 {
position: absolute;
bottom: 0.63em;
right: 1em;
width: 46%;
max-width: 35.44em;
outline:#999 solid 1px;
}
I've added outline for you to make divs visible. You may delete them.
Uhm...i don't understand what is your intention...but...do you want to align two images, one above another on the page center or one beside another or both images on right-bottom?
If you want to align elements in page, try this:
/* Both images aligned side-by-side at page center */
div.div1, div.div2
{
float: left;
margin: 0 auto;
}
/* One images at right, another at left */
div.div1
{
float: left;
}
div.div2
{
float: right;
}
Page bottom alignment is not possible...i guess.
Put you can use margin-top css property to do the trick.
Hope it helps.
After applying and mixing your all helpful answers and hours and hours of reading and trying css/html code from different sites... I have what I want; well, almost in 95% due to browsers compatibility. Here's the code:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS DIVs alignment issue</title>
<style type="text/css">
#div1 {
width:62%;
min-width:16em;
max-width:50em;
right:1em;
top:38%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
#div2 {
width:46%;
min-width:10em;
max-width:35.44em;
right:1em;
bottom:6%;
margin-right:1em;
height:auto;
z-index:0;
position:absolute;
}
.stretch {
width:100%;
height:auto;
min-width:10em;
}
</style>
</head>
<body>
<div id="div1">
<img src="http://placekitten.com/800/216" class="stretch" />
</div>
<div id="div2">
<img src="http://placekitten.com/567/43" class="stretch" />
</div>
</body>
</html>
By the way, although I prefer placehold.it to placekitten.com I use the last because the images must resize while screen does too.
You can check the result here. (Thanks to ted)