All answers are not helping me.
Please see here: https://jsfiddle.net/prg5hc9m/1/
#main {
width: 300px;
height: 400px;
position: relative;
}
#main1 {
position: absolute;
float:left;
}
#main2 {
position: absolute;
overflow-y: scroll;
height: inherit;
float:left;
width: 50%;
}
I want main2 to be under main1.
Not very clear on what you need but you cant use absolute with float. If you remove the absolutes on both the scroll section appears under the other.
updated fiddle: https://jsfiddle.net/prg5hc9m/3/
#main {
top: 20px;
left: 20px;
width: 300px;
height: 400px;
position: relative;
display:block;
}
#main1 {
float:left;
}
#main2 {
clear:left;
overflow-y: scroll;
height: 300px;
float:left;
//top: 10%;
width: 50%;
}
By 'under', I'm assuming you mean 'behind'. In order to do that, you need to add a z-index. Z-indexes start at zero, so simply give your #main1 div a z-index of 1 to have it appear 'on top':
#main1 {
z-index: 1;
}
I've created an updated fiddle here.
Hope this helps! :)
Use inline-block.
#main {
top: 20px;
left: 20px;
width: 300px;
height: 400px;
position: relative;
display:block;
}
#main1 {
display: inline-block;
float:left;
height: 50px;
}
#main2 {
clear:left;
display: inline-block;
overflow-y: scroll;
height: 300px;
float:left;
//top: 10%;
width: 50%;
}
Related
I have 3 divs in a div and I want to center the bottom one. I've tried every hint I've found on the net (a you can see in my code...), but nothing works.
This should be fairly easy, but it just won't center.
.container {
position: relative;
width: 968px;
margin: 0 auto;
text-align: center;
}
.text {
position: absolute;
width: 968px;
height: 100px;">
}
.bg_image {
position: absolute;
width: 968px;
height: 545px;
top: 150px;
background-image: url(x.jpg);
}
.bg_image2 {
position: absolute;
display: block;
width: 50%;
margin: 0 auto;
height: 200px;
top: 545px;
background-image: url(x.png);
background-repeat: no-repeat;
}
Firstly in your css code there's an error in .text remove this "> after height: 100px;
Secondly we can't answer this if you don't add your html code.
I hope this example code may help you..
<!DOCTYPE html>
<html >
<head>
<style type="text/css">
#outer{ position:fixed; top:0; left:0; width:100%; height:100%; }
#inner1{ width: 50%; height: 20%; top: 25%; margin: 0 auto; position: relative; background:orange; }
#inner2{ width: 50%; height: 40%; top: 25%; margin: 0 auto; position: relative; background:red; }
</style>
</head>
<body>
<div id=outer>
<div id=inner1> </div>
<div id=inner2> </div>
</div>
</body>
</html>
Give a fixed width eg(width:100px;) and margin:0 auto; whichever Div you want to make in center.
This will work for you.
.centerDiv{
width:100px; /*as per your choice but width should be fixed.*/
height:100px; /*as per your choice even you can add auto*/
margin:0 auto; /*this is important to make div in center.*/
}
So I have 3 Divs. Left, center right.
Image
If browser size smaller than center min-width, it goes down. Video:
Video
I don't know what do I wrong, so many people tried to help me + I searched for it but I didn't find anything. Here's the code:
HTML:
<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
CSS:
#parent
{
margin-left: 5%;
margin-right: 5%;
position: fixed;
top: 50px;
bottom: 50px;
left: 0;
right: 0;
overflow: auto;
}
#left {
position: relative;
width: 370px;
height: 100%;
float: left;
background: #093F5C;
overflow: hidden;
}
#right {
position: relative;
width: 230px;
height: 100%;
float: right;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
min-width: 550px;
overflow: auto;
}
maybe...
#left {
position: absolute;
left:0px;
top: 0px;
width: 370px;
height: 100%;
background: #093F5C;
overflow: hidden;
}
#right {
position: absolute;
right:0px;
top:0px;
width: 230px;
height: 100%;
background: #093F5C;
overflow: auto;
}
#center {
height: 100%;
position:absolute;
left: 370px; /*width of leftDiv */
right: 230px; /*width of rightDiv */
top:0px;
/*min-width: 100px;*/
overflow: auto;
background: red;
}
jsfiddle: http://jsfiddle.net/alemarch/35bxtc2z/7/ (i have change the dimension fixed of the left and right div). Is this what you search?
The #center should have a max-width:550px, not a min-width:550px. You'll also probably want to add a width to it as well.
#center {
height:100%;
max-width:550px;
width:100%;
overflow:auto;
}
There's also a lot of other odd things about your CSS in general, but thats beyond the scope of this question... Some things to think about - why does the #parent have a position:fixed ? Why is everything else position:relative ? And why do you have heights of 100% ?
Could any one help me around this piece of stupid code where I lost almost 2hours trying to figure out how to make it work. Goal is to center input field verticaly and horizontaly inside horizontal bar.
Here is a simplified code:
HTML:
<div class="navigationBar">
<input type="text" id="searchField">
</div>
CSS:
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
}
#searchField{
margin; auto;
height: 25px;
width: 200px;
}
I've also tried with display modes, changing position types but no luck.
Here is the code
Adding a line-height wil make it centered vertically.
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
}
#seachfield
margin; 0, auto;
height: 25px;
line-height: 40px;
width: 200px;
}
Answer is simple, just remove padding for #nav element and set his height and line-height to 40px and then set display: inline-block for #search
#nav {
line-height: 40px;
height: 40px;
}
#search {
display: inline-block;
}
Try below CSS:
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
position:relative;
}
#searchField{
margin: auto;
height: 25px;
width: 200px;
position:absolute;
left:0px; right:0px; top:0px; bottom:0px;
}
PS : its not margin; auto;, the correct syntax is margin: auto;
DEMO
add display:block;
#searchField{
display:block;
margin: 2px auto;
height: 25px;
width: 200px;
}
margin auto: top and left
add 'text-align: center;'=> (not only alignment text)
.navigationBar{
width:100%;
height: 40px;
background-color: rgb(102,102,102);
text-align: center;
}
#searchField{
height: 25px;
width: 200px;
display:inline-block;
margin:4px auto;
}
2 ways to do it
second way is actually using latest css features so , take care
1.)
.navigationBar { position: relative;}
#searchField { width: 300px;
height: 100px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin: -70px 0 0 -170px;
}
2.)
.navigationBar { position: relative;}
#searchField { position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
I have my left and right column which needs to have a vertical scroll-bar. How can I achieve the the scrolling without specifying height: 100%
html,body{height:100%;}
.row > .sidebar-fixed {
position: relative;
top: 0;
left:auto;
width: 220px;
height: 100%;
background: #F5F5F5;
overflow-y: scroll;
}
.left {
float:left;
}
.right {
float:right;
}
.fixed-fixed {
margin: 0 240px;
}
The problem is to ensure I need a scroll-bar in my both div's, I have to end up specifying height for all my parent which causes issue in other layouts. Is there anyway we can bring the scroll-bar without using the height: 100% value.
http://www.bootply.com/FFZWQoCSJE
Try this
.row > .sidebar-fixed {
position: relative;
top: 0;
left:auto;
width: 220px;
height: 120px;
background: #F5F5F5;
overflow-y: scroll;
}
And remove {height:100%;} from html,body in your CSS
You could use fixed positioning instead:
.row > .sidebar-fixed {
position: fixed;
top: 0;
bottom:0;
width: 220px;
background: #F5F5F5;
overflow-y: scroll;
}
.left {
left:0;
}
.right {
right:0;
}
Example
I am building a 3 columns layout website. The header will fixed on the top and nav will fixed on the left. Then the wrapper will contain main and aside. What I want is main and aside can fill the wrapper's height.
And here is my css. You can also see my jsFiddle http://jsfiddle.net/scarletsky/h8r2z/3/
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
.header {
width: 100%;
height: 100px;
position: fixed;
top: 0;
z-index: 9;
background: red;
}
.nav {
width: 20%;
height: 100%;
position: fixed;
top: 100px;
left: 0;
background: green;
}
.wrapper {
width: 80%;
min-height: 100%;
margin-top: 100px;
margin-left: 20%;
position: relative;
}
.main {
width: 70%;
min-height: 100%;
position: absolute;
left: 0;
background: black;
}
.aside {
width: 30%;
min-height: 100%;
position: absolute;
right: 0;
background: blue;
}
.u-color-white {
color: white;
}
It seems that they can work well. But when the content's height in main or aside more than their own height, it will not work. I don't know how to fix it.
Can anyone help me?
Thx!
You have a very strict layout. everything is fixed..
what if you need to change the header from 100px height to 120? you'll have to change it accordingly in a lot of different places.
This is a pure CSS solution for your layout, without fixing any height or width. (you can fix the height or width if you want to)
This layout is totally responsive, and cross browser.
if you don't fix the height/width of the elements, they will span exactly what they need.
Here's a Working Fiddle
HTML:
<header class="Header"></header>
<div class="HeightTaker">
<div class="Wrapper">
<nav class="Nav"></nav>
<div class="ContentArea">
<div class="Table">
<div class="Main"></div>
<div class="Aside"></div>
</div>
</div>
</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
}
body:before {
content:'';
height: 100%;
float: left;
}
.Header {
height: 100px;
/*No need to fix it*/
background-color: red;
}
.HeightTaker {
position: relative;
}
.HeightTaker:after {
content:'';
display: block;
clear: both;
}
.Wrapper {
position: absolute;
width: 100%;
height:100%;
}
.Nav {
height: 100%;
float: left;
background-color: green;
}
.ContentArea {
overflow: auto;
height: 100%;
}
.Table {
display: table;
width: 100%;
height: 100%;
}
.Main {
width: 70%;
/*No need to fix it*/
background-color: black;
display: table-cell;
}
.Aside {
width: 30%;
/*No need to fix it*/
background-color: black;
display: table-cell;
background-color: blue;
}
.u-color-white {
color: white;
}
This is a pretty common problem. I'd recommend either having a background image for wrapper that makes it appear like aside has a min-height of 100% or using the method on this site:
http://css-tricks.com/fluid-width-equal-height-columns/
just see this fiddle.... hope this is what you want...
.aside {
width: 30%;
min-height: 100%;
position:fixed;
right: 0;
background: blue;
}
http://jsfiddle.net/h8r2z/6/