I am trying to vertically align a div inside another div. The problem occurs because both have percentage heights. Here is my jsfiddle: http://jsfiddle.net/QeF23/1/
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
#outerdiv {
height: 50%;
width: 100%;
background-color: #000000;
}
#innerdiv {
height: 90%;
background-color: red;
float: right;
}
This would be very easy to solve if I didn't want percentage heights.
I have tried using the display: table-cell method, but haven't gotten that to work. May be that I was implementing it wrong though.
Any help, much appreciated.
Your JS fiddle looks correct - if you are trying to align it in the middle maybe try adding
#outerdiv {
height: 50%;
width: 100%;
background-color: #000000;
position:absolute;
top:25%;
}
EDIT - if you want the red div centered in the black - use the same principle:
http://jsfiddle.net/QeF23/30/
#outerdiv {
height: 50%;
width: 100%;
background-color: #000000;
position:absolute;
top:25%;
}
#innerdiv {;
position:absolute;
width: 100%;
top:5%;
height: 90%;
background-color: red;
}
Have a read at this article http://css-tricks.com/centering-in-the-unknown/.
At the end of the article, he's explaining about a trick using ghost element. I tried that before and it's working perfectly for me.
Related
I am trying setup a design where I would like a left bar for navigation and things that remains fixed and doesn't scroll, but have a content box next to it that does scroll as needed. The problem I'm running into, if I position: fixed; the first DIV it technically does what I want, but it overlaps the second DIV. I'm just creating this and using JsFiddle to test easily, so I don't have an actual working code other than this fiddle. I'll admit, I've been awake for about 30 hours now, so if this is a really silly oversight from me, please forgive me. Thanks!
FIDDLE
I tried to write this code and it is responsive too.
* {
padding: 0px;
margin: 0px;
}
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
#two {
box-sizing: border-box;
padding: 20px;
position: absolute;
left: 25%;
right: 0%;
float: right;
width: 75%;
background: #333;
}
I hope this helps.
When you add position:fixed the element is taken out of the flow and its basically functions in respect to the window .
so the following CSS :
#one {
float: left;
position: fixed;
width: 25%;
background: #666;
height: 100%;
}
25% is 25% of the window not 25% of <div id="wrap">(and hence the overlap) , if you take off the position:fixed you'll see no overlap .
with position fixed , you probably want to have some left offset on <div id="two">, you cal experiment with :
margin-left: // DO YOUR MATH.
padding-left: // DO YOUR MATH.
You already have height: 400px; on your over div so specify the height to #one too http://jsfiddle.net/ypL8ypsf/5/
#one {
position:fixed;
width:16%;
background: #666;
height:384px;
}
Hope this will help
This changes in css will solve your problem
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#one {
position: fixed;
width: 25%;
background: #666;
height: 100%;
display:inline-block;
}
#two {
width: 70%;
background: #333;
height: 100%;
display:inline-block;
overflow:hidden;
margin-left:29%;
}
.clear {
clear: both;
}
If you have position :fixed on an element. it can only controlled by the browser window, cannot control by parent div. so if you add width: 25% it fill up 25% of your browser window. not in parent div.
i have 2 solutions,
use javascript. dynamically add width in 'px' and add position:
fixed after
use position: absolute. instead of fixed. ( actually your height is 100% so it doesn't matter your position fixed. )
1nd solution: javascript approach [sample code]:
//remove position:fixed from #one
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
}
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var calWidth = $("#one").width(); //get the width
$("#one").css({width:calWidth+'px',position:'fixed'}); //apply to the div
</script>
2nd solution: CSS approach [sample code]
#wrap{
position:relative;
}
#one{
position:absolute;
}
Try overriding your current float and position styles with:
float: left; and
position: relative;
Instead of fixing that DIV, I've float them both to the left and give the second DIV overflow-y scroll property.
Hope this can help you:
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
}
#one {
float: left;
width: 25%;
background: #666;
height: 100%;
overflow:hidden;
}
#two {
float: left;
width: 75%;
background: #333;
height: 100%;
overflow-y: scroll;
}
.clear {
clear: both;
}
If it is not usefull you always can try some framework with default sidebars.
Although you could add some margin to the second div to displace it to the right, I don't think you should use fixed for this.
You should do this:
<div class="div1">This is not moving</div>
<div class="div2"> Loren ipsum...</div>
html, body{
height: 100%;
padding: 0;
margin: 0;
}
.div1{
background: #DDD;
width:40%;
height: 100%;
float: left;
overflow: hidden;
}
.div2{
background: #EEE;
width:60%;
height: 100%;
float: left;
overflow-y:auto;
}
Here is a pen for you: http://codepen.io/vandervals/pen/bdBWJV
I managed to do what you want but by adding more div.
the HTML would be
<div id="wrap">
<div id="testone"><div id="one"></div></div>
<div id="test"><div id="two">Lorem ipsum...
</div></div>
<div class="clear"></div>
and the css then
#wrap {
background: #999;
width: 500px;
height: 400px;
border: 1px solid black;
padding: 5px;
overflow: scroll;
}
#testone{
float: left;
width: 25%;
background: #666;
height: 100%;
}
#one {
position: fixed;
}
#test{
float: right;
width: 75%;
height: 100%;
}
#two {
background: #333;
}
.clear {
clear: both;
}
I am trying to align the div vertically using position. its works well in all browsers except Internet Explorer. In internet explorer the .nav-group aligned left. How can i solve this.
JS Fiddle
HTML:
<div class="container">
<div class="nav-group">// Content</div>
</div>
CSS:
.container
{
width: 100%;
position: relative;
}
.nav-group
{
display: table;
background-color: red;
margin: auto;
width: 200px;
height: 100px;
position: absolute;
bottom: 50px;
left:0;
right:0;
}
change the display:table to display:inline.
.nav-group { display:inline}
Demo
Hope this will help you Link
css:
.container {
width: 100%;
display:table;
}
.nav-group {
display: table-cell;
background-color: red;
margin: auto;
width: 200px;
height: 100px;
position: absolute;
bottom: 50px;
left:0;
right:0;
}
The fact that your are using absolute positioning is affecting your layout. You have options to either change the absolute positioning and use margin:0 auto. or change the display you are giving the element.
Fiddle
change display:table; to display:block;
OR
removing display:table; work also
SEE DEMO
.nav-group
{
display: block;
background-color: red;
margin: auto;
width: 200px;
height: 100px;
position: absolute;
bottom: 50px;
left:0;
right:0;
}
You are using Position:absolute and margin:auto for the same div where it might not work. so I modified like this: Updated Demo
.container {
width: 100%;
text-align:center;
}
.nav-group {
display:table;
background-color: red;
width: 200px;
height: 100px;
position: absolute;
bottom: 50px;
left:50%;
margin-left:-100px;
right:0;
}
You can use display:table; here it don't affect anything..
I tested in IE 10, latest version of firefox and chrome.. Its working fine..
I need to have a container div with an image inside.
The container div must be centered horizontally AND it must only take up as much space as its content, the image, has.
The image inside must resize with the window size.
I've tried to achieve this with display: inline-block; - It works when resizing the window horizontally, but not when resizing vertically.
Check out this fiddle http://jsfiddle.net/J86L9 - resize the window horizontally and vertically to see the "bug".
EDIT: Safari does it right, while Chrome does not resize the container but the image and Firefox does nothing at all. I think it could have to do with the max-height property?
#wrap {
text-align: center;
}
#container {
display: inline-block;
border: 1px solid red;
max-width: 75%;
max-height: 75%;
}
img {
display: block;
max-width: 100%;
max-height: 100%;
}
Display the container as table is the easiest way.
**Will this work? http://jsfiddle.net/J86L9/39/
body, html {margin:0; padding:0; width:100%; height:100%;}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
outline: 0;
}
#wrap {
display: table; width:100%; height:100%; border:1px solid red;
}
#container {
display: table-cell; margin:0 auto; background:#ccc; text-align:center; vertical-align:middle;
}
img {
width: 50%; max-height:90%; display:inline-block;
}
Does this work for you?
http://jsfiddle.net/J86L9/42/
The "secret" is using a background image on a div rather than an img tag. This may work better for you as you mentioned in comments that you wanted other elements along with the image inside the container.
I know the border doesn't track exactly to the image but if you want that behaviour you should just set the border on your image rather than a container div.
CSS:
html, body {
height: 100%;
width: 100%;
}
.wrapper {
width: 50%;
height: 100%;
position: relative;
}
.wrapper:after {
padding-top: 150%; /*this specifies the aspect ratio*/
display: block;
content: '';
}
.main {
position: absolute;
top: 0; bottom: 0; right: 0; left: 0; /*fill parent*/
background: url(http://placekitten.com/g/400/600) no-repeat center center;
background-size: contain;
border: 1px solid red;
}
I'm trying to do a basic layout for a website. But I have two problems:
I'm getting spaces between my divs. I have already set margin and padding to 0.
I can't use % to set hights, I have to use vh for some of the divs and I don't understand why.
fiddle: http://jsfiddle.net/4awfk/
HTML:
<body>
<main id="stora">Stora</main>
<nav id="navigation">
<ul>
<li id="ettan"><a>Inredningsuppdrag</a></li>
<li id="tvaan"><a>Instagram</a></li>
<li id="trean"><a>Kontakt</a></li>
<li id="fyran"><a>Leverans</a></li>
</ul>
</nav>
<footer>adress</footer>
</body>
CSS:
* {
padding:0;
margin: 0;
}
html {
height: 100%;
width: 100%;
}
body {
background: yellow;
height: 100%;
width: 100%;
}
li {
list-style: none;
}
#stora {
width: 50%;
height: 100%;
background: red;
float:left;
}
#navigation {
width: 50%;
height: 100%;
background: blue;
float: right;
}
footer {
width: 100%;
height: 25px;
background: white;
position: fixed;
bottom: 0px;
}
#ettan {
width: 50%;
height: 70vh;
background: olive;
float: left;
}
#tvaan {
width: 50%;
height: 35vh;
background: turquoise;
float: left;
}
#trean {
width: 50%;
height: 35vh;
background: white;
float: left;
}
#fyran {
width: 100%;
height: 30vh;
background: gray;
float: left;
}
To remove the spaces between the divs try setting font-size:0 for the whole document and set a font-size on the anchors or the element containing your text, try this for your example:
html {
height: 100%;
width: 100%;
font-size:0;
}
#navigation ul li a {
font-size:14px;
}
Briefly the vh (viewport height) is a new feature in CSS3, I'll explain with an example, if you set your div height to 50vh, this means that you want your div height to stretch to 50% of the viewport height, while setting it to 50% would make stretch to 50% of the div's parent height (same applies for width:50vw).
Here is a reference on how to use them.
EDIT
Another thing to try:
Try floating only the left div and remove the float from the right div, but set display:inline-block for both of them, I can't test the result because I don't have safari, so try it and let us know if it helps.
#stora {
width: 50%;
height: 100%;
background: red;
float:left;
display:inline-block;
}
#navigation {
width:50%;
height: 100%;
background: blue;
display:inline-block;
}
Strange, it looks fine in Chrome and Firefox. Darn cross browser compatibility!
You should try:
overflow:hidden;
I do not have Safari installed to test so this is all I've got, good luck to you sir.
For me:
There was a thin line between dives, so i used
border : 2px solid white;
if you want to set different color for different side of dives, then you should use :-
border-top :
border-right :
border-left :
border-bottom :
based on the side you want to remove the "thin line"
Pardon me if my commenting format is not well defined / sorted (My 1st comment in StackOverFlow)
How can I make the divs side by side and one of the div ('contentwrapper') be responsive to the browser resizing.
HMTL
<div id="maincontainer">
<div id="leftcolumn"> </div>
<div id="contentwrapper"> </div>
</div>
CSS
#maincontainer {
width:100%;
height: 100%;
}
#leftcolumn {
display:inline-block;
width: 100px;
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
width:100%;
height: 100%;
background-color: red;
}
JSFIDDLE http://jsfiddle.net/A5HM7/
<style>
#maincontainer {
width:100%;
height: 100%;
}
#leftcolumn {
float:left;
display:inline-block;
width: 100px;
height: 100%;
background: blue;
}
#contentwrapper {
float:left;
display:inline-block;
width: -moz-calc(100% - 100px);
width: -webkit-calc(100% - 100px);
width: calc(100% - 100px);
height: 100%;
background-color: red;
}
</style>
Ok, so I think this will be the quickest fix for you. You already have a great html structure but I am going to narrow it down more for you. Here is the JsFiddle.
With your code:
#maincontainer {
width:100%;
height: 100%;
}
I have made a minor adjustment like so:
#maincontainer {
width:100%;
height: 100%;
display:inline-block;//added this
}
and then I also restructured two other things like so:
#leftcolumn {
float:left;//added this
width: 100px;
height:100%;
background: blue;
}
#contentwrapper {
float:right;//added this
width:100%;
height: 100%;
background-color: red;
}
Now in this JsFiddle, I have appropriately created a specific width, so you can always change that. Please keep in mind that if you use 100% as a width, and try to stick something else in that same line, it will automatically create two lines such like so:
#leftcolumn {
display:inline-block;<-- changed this above.
width: 100px;<----This won't work with the below
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;<---- changed this above.
width:100%;<---- This won't work with the above
height: 100%;
background-color: red;
}
But if you restructure that to be more like this:
#leftcolumn {
display:inline-block;
width: 10%;<---This will work with the below
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
width:90%;<---This will work with the above.
height: 100%;
background-color: red;
}
A few things to note, I did add in a height with the JsFiddle so that I could see the actual dimensions and I also added in width for the exact reason. Something to note that can really help out with implementations and the basic "why does this work" is this.
Comment below if something doesn't work for you :)
It's also possible to get 2 div's beside each other without using float's or absolute positioning.
I'm using the calc function which is supported in IE9 and above.
MDN calc specs
And don't forget the space blocker Stackoverflow: 50% wont fit because hidden space between divs
<!-- HMTL -->
<div id="maincontainer">
<div id="leftcolumn"> </div><!-- space blocker
--><div id="contentwrapper"> </div>
</div>
CSS
#maincontainer {
width:100%;
height: 100%;
}
#leftcolumn {
display:inline-block;
width: 100px;
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
width: calc(100% - 100px);
height: 100%;
background-color: red;
}
there are multiple possibilities, but the easiest is using flexbox. See the documentation of the flexible box layout module for more info. Note that it is still a candidate recommendation, so some browsers could have problems with it.
#maincontainer {
width:100%;
height: 100%;
}
#leftcolumn {
display:inline-block;
position: absolute;
width: 340px;
float: left;
height: 100%;
background: blue;
}
#contentwrapper {
display:inline-block;
margin-left: 340px; // see how this is equal to the width of #left-column
position: absolute; // might want to try with this or position relative
max-width: 100%;
width: 100%; // might want to try with or without this line
height: 100%;
background-color: red;
}