Basically I have 3 floating elements, they are next to each other and are scaled down when you resize the browser window.
Now under a certain width (#media (max-width: 800px)) the elements get a fixed width and a clear:both so that they are below eachother and no longer scale.
What I'm trying to do now is centering those 3 divs inside their parent.
margin:0 auto is not helping
Above 800pixel width:
Below 800pixel width:
--> Div should be centered inside the yellow one
Code I have for the media query:
#media (max-width: 800px){
.data .data_column{width:215px;background-color:red;clear:both; margin: 0 auto;}
.data{width:90%;background-color:yellow;}
}
Replacing your clear:both with a float: none should be enough to let margin: auto do the work.
Try following:
<div class="data">
<div class="data-column"></div>
</div>
And CSS:
.data {
position: relative;
width:90%;
height: 250px;
background-color:yellow;
}
.data-column {
clear:both;
position: absolute;
height: 150px;
width: 215px;
/* horizontal centering */
right: 0;
margin-right: auto;
left: 0;
margin-left: auto;
/* vertically centering */
top: 0;
margin-top: auto;
bottom: 0;
margin-bottom: auto;
background-color: red;
}
Here is a FIDDLE
Related
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 one main div that should make the page scrollable. On either side of this div there is a sidebar. The only difference I want from how it is now, is that the sidebars should always stay on top (position: fixed;)
I've tried everything, but it doesn't work. If I put position: fixed; on the .fixed, the width is no longer 100 % but the width of the actual contents inside. If I put on width: 100% the width turns 100 % of the viewport.
Is this even possible with just CSS?
JSFiddle: http://jsfiddle.net/6yWNv/
Sidebar 1
<div id="wrapper">
<div class="contents">
<p>Lorem ipsum dolor sit amnet.</p>
</div>
</div>
<div class="sidebar">
<div class="contents">
<div class="fixed">
Sidebar 2
</div>
</div>
</div>
html, body {margin: 0; padding: 0;}
#wrapper {
width: 54%;
float: left;
background: #0FF;
}
.sidebar {
width: 23%;
float: left;
}
.sidebar .contents {
margin: auto;
background: #F00;
min-width: 100px;
width: 55%;
height: 100px;
}
.sidebar .contents .fixed {
background: #0F0;
}
The trick is to set position:fixed on the sidebar (with left:0 and right:0 respectively) and then add margin-left:23% to #wrapper:
#wrapper {
width: 54%;
margin-left: 23%;
background: #0FF;
}
.sidebar {
width: 23%;
position: fixed;
left:0; top: 0;
}
#wrapper + .sidebar { /* target second sidebar */
left: inherit; /* reset left */
right:0;
}
if you want the green sidebars to stay in place, but the red boxes to move away, then something like this should work:
.sidebar {
width: 23%;
float: left;
position: relative; /* so sub-containers are relative to sidebar */
}
.sidebar .contents {
margin: auto;
background: #F00;
min-width: 100px;
width: 100%; /* relative to sidebar */
height: 100px;
}
.sidebar .contents .fixed {
background: #0F0;
position: fixed; /* starts a new context... */
width: 23%; /* so this is not relative to sidebar *.
}
Not possible with just CSS. When you make an element fixed, it removes it from its "context" and makes its new "context" the document. That's why specifying width: 100% on the position: fixed element spans the page.
Edit: I'm assuming that you want the green sidebars to stay in place but the red boxes to move away as you scroll (I'm making this assumption because of the way you've named your classes on your page).
you need to fix the sidebar, not its contents.
Just remove the float and set the position fixed to top and right
.sidebar {
width: 30%;
position: fixed;
top:0;
right:0;
}
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;
}
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 am trying to change my old website menu to be mobile friendly and have a problem how the "menu elements" are displayed on small screen.
The menu consists of 3 elements (left, middle, right), now on small screen, they go vertically in same order.
But i would like to know if its possible with css to have them position like that, where the middle keeps its position and the left and right are moved under it, or does it need some more tricks.
How to achieve it?
http://img834.imageshack.us/img834/2203/menuse.jpg
EDIT, Added simplified code what i used to play around:
<div id="header">
<div id="Bholder">
<div id="AButton"></div>
<div id="HButton"></div>
<div id="CButton"></div>
</div>
</div>
CSS
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 750px;
}
#AButton{
float: left;
width: 250px;
height:100px;
background-color: red;
}
#CButton{
float: left;
width: 250px;
height:100px;
background-color: green;
}
#HButton{
float: left;
width: 250px;
height:100px;
background-color: yellow;
}
#media only screen and (max-width: 767px){
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 250px;
}
}
You could maybe try floating the left and right element to the right, and the middle element to the left. Then make the width of the wrapper element the same size as each element to get them to 'jig' about visually.
But yea, code would be helpful to see how you have the menu set up.
[EDIT]
#media only screen and (max-width: 767px){
#Bholder{
margin-left: auto;
margin-right: auto;
max-width: 250px;
position: relative;
}
#AButton {
position: absolute;
top: 100px;
left: 0;
}
#HButton {
position: absolute;
top: 0px;
left: 0px;
}
#CButton {
position: absolute;
top: 200px;
left: 0;
}
}
A note: I'd stick that in an <ul> with <li> instead of div's. And I'd use classes instead of #id's for your css.