I have something akin to the following structure:
<html>
<body>
<div>
</div>
</body>
</html>
I want the inner div to occupy the full vertical height of the page except for an 8px margin from top and bottom. I also want this div to be centered horizontally within the body with a minimum margin of 8px from left and right. I do not want the page to scroll and need to avoid using calc() at all costs for browser support-ability.
I have tried:
html, body{
height: 100%;
}
div {
position: absolute;
top: 8px;
bottom: 8px;
}
Which is fine for forcing it to leave an 8px "margin", but centering it horizontally now becomes impossible without using a calc() since its width is variable and there are no elements for it to be relative to.
I hope I understand your question right... you want the div to fill the whole window, except for 8px... Is that right?
You can do that using this CSS:
div {
background: lightblue;
position: absolute;
top: 8px;
left: 8px;
bottom: 8px;
right: 8px;
}
Check the demo.
[OPTION 2]
If you want the div to have a fixed width (or semi-fixed with max-width or min-width) you can use this code:
html, body {
margin: 0;
padding: 0;
height: 100%;
}
body {
padding: 8px;
box-sizing: border-box;
-moz-box-sizing: border-box;
}
div {
background: lightblue;
width: 300px;
margin: 0 auto;
height: 100%;
}
It says the body to be 100% height and width and calculate the padding within it's width (therefor the box-sizing) property. Then you can specify the width on the div, and center it by using margin: 0 auto.
Check the updated demo.
div{
display: block;
margin-left: auto;
margin-right: auto;
}
centered div
UPDATE: remove position: absolute;
FIDDLE
You can use margin:
div {
margin: 0 auto;
}
I think it's best to introduce a new div:
<body>
<div class="container">
<div class="center"></div>
</div>
</body>
Then in your CSS you could do this:
.container {
position: absolute;
top: 8px;
bottom: 8px;
left: 0;
right: 0;
}
.center {
margin: 0 auto;
}
http://jsfiddle.net/5X79H/1/
following code will center your div:
<body>
<div class="container">
<div class="center"></div>
</div>
</body>
style:
.center {
margin-left: auto;
margin-right: auto;
display: inline-block;
background-color:maroon;
width:100px;
height: 100px;
}
.container{
width:100%;
text-align: center;
}
Related
I need to make a child div leak the parent container max width.
Now, i can only leak parent padding (knowing it).
I need this to wrap all the page on a container and make some sections leak.
Without this, i will need to set the container on every section.
Here is some snippets
Better snippet on codepen
.container {
max-width: 500px;
margin: 0 auto;
padding: 0 30px;
background: lightblue;
}
.child {
background: lightcoral;
height: 200px;
}
.child.cancel-padding {
margin: 0 -30px;
}
.child.leaked {
}
html,
body {
margin: 0;
padding: 0;
}
* {
text-align: center;
font-family: sans-serif;
}
<small>note: see in fullscreen or on codepen</small>
<h1>what i have</h1>
<div class="container">
<div class="child">A element inside a container</div>
</div>
<h1>what i need</h1>
<div class="container-leaked">
<div class="child leaked">
a element inside the container, but leaking all view width (100vw)
</div>
</div>
<h1>what i can do now</h1>
<div class="container">
<div class="child cancel-padding">Make the element cancel the parent padding, that's all</div>
</div>
<h1>Why i need</h1>
<p>
i will wrap all the page in the container, but sometimes i need sections to leak the container with full view width.
</p>
Note: on the demo, i've set the child height, but i will not have control of it. it's a dynamic content div, so height is dynamic.
You can do it by using relative positioning. Indeed, you need position: relative on your container and your child -leak. Then, to center your child, you use
left: 50%;
transform: translateX(-50%);
This works because your container is centered. So left: 50% will move the child left edge to 50% of its parent width from its initial position (which mean the center of its parent). Then, transform: translateX(-50%) will move the left edge of your child 50% of its width on the left. You then just need to add width: 100vw to make your child full width. Here is the snippet:
.page {
position: relative;
}
.container {
max-width: 100px;
margin: 0 auto;
padding: 0 30px;
background: lightblue;
position: relative;
}
.child-leak {
height: 200px;
background: lightcoral;
position: relative;
left: 50%;
transform: translateX(-50%);
padding: 10px;
width: 100vw;
}
html, body{
margin: 0;
padding: 0;
text-align: center;
font-family: sans-serif;
}
<div class="page">
<h1>My title</h1>
<div class="container">
<div class="child-leak">
My full width child
</div>
</div>
<div>Below content</div>
</div>
This technique for horizontally center an element works also for vertical centering. This works because a value in % for top, left, right and bottom refers to the first non static parent width and height. On the other hand, translate with a value in % use the element width and height.
This may be a little bit of a hack, but I've done it before by adding ::before and ::after. Add position: relative to the .child and then add the following css
.child.leaked:before{
content:"";
display: block;
position: absolute;
height: 100%;
width: 100%;
left: -100%;
background-color: red;
top: 0;
}
.child.leaked:after{
content:"";
display: block;
position: absolute;
height: 100%;
width: 100%;
right: -100%;
background-color: red;
top: 0;
}
Here is an approach you can try:
.container {
max-width: 500px;
margin: 0 auto;
padding: 0 30px;
background: lightblue;
}
.child {
background: lightcoral;
height: 200px;
width: 400%;
margin-left: -150%; /* (width of child - 100) / 2 */
}
html,
body {
margin: 0;
padding: 0;
overflow: hidden; /* prevent horizontal scroll bar */
}
* {
text-align: center;
font-family: sans-serif;
}
<div class="container">
<div class="child">I am outside the parent</div>
</div>
I am building a site that works fine in both Chrome and Safari, but am having difficulties in Firefox. The applicable HTML in this issue is simple, is is just three divs inside of another div. The goal is to have one div positioned at the top of the parent div, one at the bottom, and one stretching across the remaining space:
<div class="outer">
<div class="top">
<p>some junk here</p>
</div>
<div class="middle">
<img src="<?php echo(htmlspecialchars($image_url)); ?>"/>
</div>
<div class="bottom">
<p>more junk</p>
</div>
</div>
Now, the css is as follows:
.outer {
position: relative;
display: inline-block;
text-align: center;
width: 600px;
height: 600px;
}
.middle {
background-size: 100%;
top: 62px;
bottom: 62px;
right: 0;
left: 0;
margin: 0;
padding: 0;
position: absolute;
}
.middle img {
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
max-width: 95%;
max-height: 95%;
}
.top, .bottom {
width: 100%; /* THIS IS WHAT IS NOT WORKING */
height: 60px;
margin: 0;
padding: 0;
display: table;
position: absolute;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
The issue is that the top and bottom divs are not extending to 100%. The are taking up as little space as necessary to fit their content. I have tried setting a max width on the divs, tried changing the display types, but nothing works. The kicker is, once I resize the window even the smallest amount, the top and bottom divs shoot to 100%. Strange. I am at a loss with this one so any help is greatly appreciated. Thanks.
.outer DIV cannot be display: inline-block for this scenario. inline-block means to adapt to the child widths. You need to either specify an exact width dimension, or use block display property.
.outer {
position: relative;
display: block; /* use BLOCK here instead of inline-block; */
text-align: center;
}
The reason why the top and bottom divs' widths were not working properly was because they were set to a display type of table. Removing just that line fixed the issue.
.top, .bottom {
width: 100%;
height: 60px;
margin: 0;
padding: 0;
/* REMOVE: display: table; */
position: absolute;
}
I have three divs. I need header and left_side divs to be fixed and content div to scroll. I've been searching for solution and found something with overflow and position. But I can not use it corectly. How can I do this? I will be thankfull for every kind of answer.
body {
width: 100%;
height: auto;
padding: 0;
margin: 0px auto;
font-family: Calibri, Georgia, Ubuntu-C;
font-size: 16px;
margin-bottom: 20PX
}
#header{
width: 100%;
height: 139px;
background-image: url('images/Header_grey.gif');
}
#left_side {
width: 210px;
height: 700px;
background-image: url('images/Left_side.gif');
background-repeat:repeat-y;
overflow:hidden;
position:absolute;
font-size: 16px;
}
#content {
height: auto;
padding: 20px;
margin-left: 230px;
margin-right: 20px;
padding-bottom: 30px
}
<div id="header">
</div>
<div id="left_side">
</div>
<div id="content">
</div>
overflow: auto; adds the scroll when need
#header{
width: 100%;
height: 139px;
background-image: url('images/Header_grey.gif');
overflow: hidden; /* code added to prevent scroll */
}
#left_side{
width: 210px;
height: 700px;
background-image: url('images/Left_side.gif');
background-repeat:repeat-y;
overflow:hidden; /* code added to prevent scroll */
position:absolute;
font-size: 16px;
}
#content{
height: auto;
padding: 20px;
margin-left: 230px;
margin-right: 20px;
padding-bottom: 30px;
overflow: auto; /* code added */
}
at first you will need to have a fixed height for content area.
then make overflow:auto there
ERROR in your code:: you want to have a scroll bar for a div,but you are declaring that div height as auto
you cant demand a scroll bar when the height is auto,to have scroll bar you will need to have a fixed height for that div and when the content height will be greater than div height it will introduce scroll bar automatically
NOTE: so the changes in your css will be
#content{
height: 300px;/*..very important if you want scroll bar...*/
overflow: auto; /*..will introduce scroll bar when needed..*/
padding: 20px;
margin-left: 230px;
margin-right: 20px;
padding-bottom: 30px
}
EXAMPLE :: FIDDLE
If you want the header and left side to stay in their position while scrolling, you will have to use position:fixed
You can just use position fixed. http://jsfiddle.net/Nrs2u/1/
#header {
position: fixed;
z-index: 2;
left: 0%;
top: 0%;
width: 100%;
height: 10%;
background-color: purple;
}
#side {
position: fixed;
z-index: 2;
left: 0%;
top: 10%;
width: 10%;
height: 90%;
background-color: red;
}
#body {
position: absolute;
left: 10%;
top: 10%;
width: 90%;
height: 300%;
background-color: orange;
}
position: sticky on the element, that should stay in place when scrolling, worked for me in a similar situation.
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_sticky
position: sticky;
top: 0px;
#left_side{
...
overflow:auto;
}
Set also a padding-right to create a space between div's inner content and scrollbar
As an learning exercise, I decided to update the answer by using CSS3 Flexbox. I also tried to more closely match the layout that jstorm31 was attempting to create.
Ritabrata's answer is the correct one: If you want a specific element to have scroll bars, you need to set its height (and/or width) to a fixed size and overflow to auto.
Code also to be found here: Plunker
style.css
#header{
overflow: hidden;
background-color: #880016;
height: 50px;
border-bottom: 4px solid black;
padding: 10px;
font-size: 20px;
}
#side_and_content {
display: flex;
}
#left_side{
flex: 1;
overflow:hidden;
background-color: #ED1B24;
height: 200px;
border-right: 2px solid black;
padding: 10px;
}
#content{
flex: 5;
overflow: auto;
background-color: #FF7F26;
height: 200px;
border-left: 2px solid black;
padding: 10px;
}
index.html
<div id="header">
header header header header header header
</div>
<div id="side_and_content">
<div id="left_side">
left side left side left side left side left side
</div>
<div id="content">
CSS3 Flexbox Concepts:
Flexbox consists of flex containers and flex items.
A flex container is declared by setting the display property of an element to either flex
(rendered as a block) or inline-flex (rendered as inline).
Inside a flex container there is one or more flex items.
Note: Everything outside a flex container and inside a flex item is rendered as usual.
Flexbox defines how flex items are laid out inside a flex container.
Flex items are positioned inside a flex container along a flex line.
By default there is only one flex line per flex container.<br>
It is also possible to change the direction of the flex line.
If we set the direction property to rtl (right-to-left), the text is drawn right to left, and also the flex line changes direction, which will change the page layout
</div>
</div>
I'm trying to get a div to fill the remaining height of a div. Here's my HTML and CSS:
CSS:
* {
padding: 0px;
margin: 0px;
}
#container {
margin: 85px auto 0px auto;
background: #444444;
min-height: 500px;
width: 900px;
}
#topbar {
width: 900px;
height: 85px;
background: #555555;
}
#leftbar {
width: 250px;
height: 100%;
background: #666666;
}
HTML:
<div id="container">
<div id="topbar">
</div>
<div id="leftbar">
</div>
</div>
I expected leftbar to fill the height between the bottom of topbar and the bottom of container, but it's scretching container so that leftbar is 100% of the page height.
You can stretch the leftbar with absolute positioning and setting the top/bottom values:
* {
padding: 0px;
margin: 0px;
}
#container {
position: relative;
margin: 85px auto 0px auto;
background: #444444;
min-height: 500px;
width: 900px;
}
#topbar {
width: 900px;
height: 85px;
background: #555555;
}
#leftbar {
position: absolute;
top: 85px;
bottom: 0;
width: 250px;
background: red;
}
Fiddle:
http://jsfiddle.net/robertp/CQ7pf/
Try adding this to container:
position: relative;
and then add this to leftbar:
position: absolute;
top: 0;
bottom: 0;
Set your left bar to position: relative;
So leftbar should be container's height minus topbar's height. Since container and topbar have hard-coded height values, it follows that leftbar will have to be hard-coded also. It's not the prettiest thing in the world but it's simpler than the alternative, JavaScript.
If container is 500px in height, subtract the height of topbar (85) and container's margin (85) to arrive at a height of 330px. Since container uses min-height, use min-height for leftbar also to allow it to stretch the container if need be. You should also change leftbar's position to relative to render the height of container correctly.
Bottom line:
#leftbar {
position: relative;
min-height: 330px;
}
I am trying to achieve following with my code: I would like to have a div container, div#title-box, that is centered. Inside that div container I want to have 3 other div containers, div#logo, div#title, div#subtitle (look at the code to see how exactly they are displayed)
Now the actual problem: The div#logo has a given width, the other two however don't, they float.
How can I have have the div#title-box wrap around the other three divs but at the same time staying centered. Another problem I see is that the div#title-box cannot have a fixed width.
Any ideas. Thanks!
EDIT: The code below has to be modified so that the div#title-box wraps around the other divs and stays centered.
If anyone needs to play around with the code, here is it with a full example:
<!DOCTYPE html>
<html>
<head>
<style>
div#title-box {
max-width: 500px;
display: block;
height: 600px;
margin: 0 auto;
position: relative;
}
div#logo {
padding: 0;
margin: 0;
position: absolute;
top: 100px;
left: 5px;
width: 100px;
height: 100px;
overflow: auto;
background: #ff0000 no-repeat;
background-size: 100% 100%;
border-radius: 15px;
float: left;
}
div#title {
padding: 0;
margin: 0;
position: absolute;
left: 110px;
top: 100px;
bottom: 20px;
right: 10px;
overflow: auto;
float: left;
}
div#subtitle {
padding: 0;
margin: 0;
position: absolute;
top: 140px;
bottom: 20px;
right: 10px;
left: 110px;
overflow: auto;
float: left;
}
</style>
</head>
<body>
<div id="title-box">
<div id="logo">
</div>
<div id="title">
<h1>Hello</h1>
</div>
<div id="subtitle">
<h3>A A A A A A A A A A A A A A A!</h3>
</div>
</div>
try something along the lines of
div#title-box {
width: 500px;
display: inline-block;
height: 600px;
margin: 0 25%;
position: relative;
left:-250px;
}
When you apply
position: absolute
to your code, it will be put out of the rest of the DOM-context.
I have modified your CSS as such: http://jsfiddle.net/asBmS/. Your wrapping div now should always contain the child divs. Is this what you wanted?
The best thing I can think to suggest is more of a 'hack' which would need to be adjusted if you change the width of the content.
Take a look at this link and see the offset margin-left, it puts everything in the center.
You'll probably need to tweak it further to meet your needs.
http://jsfiddle.net/asBmS/15/
#logo,#title,#subtitle{
/*offset hack*/
margin-left: 10% !important;
}