DEMO HERE
I have two divs in a container. Both divs have 100% and 100% height. How do I position those divs side by side?
I tried float:left and display:inline-block but nothing seems to work. Second div is always under first div, not side by side
P.S. I don't want to use absolute position and I want one div overflown.
If both of them has 100% width you can't get the second one side by side. You should use "width: 50%" in those divs (I suppose they didn't have margins or padding), and then "float:left" the first one. The second one should go to the right of the first one.
If you want to add both div side by side you can not set div width 100%, you can set width 50% to check both are side by side without using display:inline-block
.innerDivs{
width:50%; // Change 100% to 50%
height:100%;
float:left;
}
Check this Demo
You should add overflow:hidden; property in outer div to solve this
Check this Demo
HTML
<div style="width:300px;height:100px;border:3px solid black;margin-top:100px;margin-left:100px;overflow:hidden;">
<div class="innerDivs" style="background:orange"></div>
<div class="innerDivs" style="background:red"></div>
</div>
CSS
.innerDivs{
width:100%;
height:100%;
float:left;
}
Related
I want to make a div that follows the viewport. I am not able to use fixed positioning. For some reason the div doesn't follow the viewport properly, it always 'lags' behind, especially when changing scroll direction. You can see what I mean on plunker here.
That is the first part of the problem. The second is that I need the div to immediately move into the viewport when it appears. (Clicking anywhere in the output panel in the plunker will toggle the div to appear). The *ngIf part of the appearing is important because in my actual app I am using a component with entry animations instead of a div, so no [hidden] I'm afraid.
So why can't I use fixed positioning?
Basically, fixed positioning causes the element to calculate the width differently to its sibling elements when the viewport contains scrollbars. I also can't use the overflow: scroll trick on the element because it has shadows that get clipped by the viewport. It also looks ugly having two scrollbars.
Here is a fixed centered div in a wrapper using flex.
Demo Here
#wrapper{
position:absolute;
width:100%;
height:100%;
position:fixed;
display: flex;
justify-content: center;
}
#my-app{
position:relative;
width:50%;
height:50%;
background-color:green;
}
<div id="wrapper">
<div id="my-app">
</div>
</div>
Please check this fiddle http://jsfiddle.net/JH4Ew/1/. I want align <p class="email"> to the bottom. I thought if I put
margin-top:100%;
it means 100% from height of the parent element. On the fiddle seems more then 100% of height. How to do this in right way?
PS I have updated the fiddle to right content, previous wasn't updated
Add the following CSS to align the paragraph to the bottom of the div:
#opening4 {
position:relative;
border: 1px solid #999;
}
.email{
position:absolute;
bottom:0;
}
jsFiddle example
By positioning the div relatively it allows you to set the position on the email paragraph absolutely, and by setting the bottom to zero, it will remain at the bottom of the parent.
Remove position: relative from the parent if you want it to be at the bottom of the window:
http://jsfiddle.net/2VyCj/1/
Margin is distance from sibling elements, not the distance from the inside of the parent.
I remember asking this question a while back but i can't seem to find it again! I've searched but i can't seem to find the solution i'm looking for.
Let's say i have two divs with 100% width floated next to each other. As they take up the entire screenwidth, there is no longer any space left for them to float on, and therefore the second div appear below the first one. What i want is to make the second div continue floating off screen next to the first one.
I think the solution i got was to set the display property to something else, but i'm not entirely sure.
Any suggestions?
I believe you would have to have a container and set the container width to 200%. The two inside divs with 50% width will fit inside.
#container_div{ width:200%}
.inner_div {width:50%}
You could position them absolutely.
<body style="padding:0; margin:0">
<div style="width:100%; position:relative;">
<div style="width:100%; height:100px; background:#f90; position:absolute; top:0; left:0;">COLUMN1</div>
<div style="width:100%; height:100px; background:#f00; position:absolute; top:0; left:100%;">COLUMN2</div>
</div>
</body>
They are positioned absolutely within the bound of the relatively positioned parent.
Then you switch between them you just switch the left values, from 0 to 100% respectively.
heights and background colours are just to see whats going on :)
give 50% width to both div
so they occupy 100% width together
I have a div directly under the body. My HTML looks like this:
<body>
<div class="parent"></div>
</body>
And the css I use is this:
.parent {
border:1px solid black;
bottom:10px;
position:relative;
top:100px;
width:500px;
}
This div doesnt stretch to the entire viewport/available body height. However, if I change the position to absolute, It does stretch.
Is there a way to get a relative positioned element to stretch to its container element height. I tried height 100% as well and it works but it gives a vertical scrollbar to me as the element is positioned at 100px from TOP.
The terms top, bottom, left and right are generally used for absolute positioning. If you want a div container to be as big as it's parent's container, then you have to specify through the terms height and width, and use a percentage or integer with a measurement scale attached such as 'px'. If you are worried about a scrollbar, just use the rule overflow:hidden;
I'm braindead on this and I know it's simple.
There's a header div, appears fine. There's a left-sidebar div, appears fine with top snuggled up to header div.
Then there's a main content div. There is an image and h1 which appear like you would expect up against the header div, but then a large gap appears until the navigation (in a nested div). Navigation is correctly in the main content div, but top of this div always aligns with bottom of sidebar content.
I've tried mixtures of clear:left and both and floating and whatnot. If inside the html I move the sidebar div below the main content div then the main content has no gap but the sidebar has a big top gap and appears flush to the bottom of where the main content nav ends.
What am I missing here, thanks in advance!
Are you setting any widths (or padding, margin, border) which might make your problematic div too wide to fit?
Remember that if you are doing something like :
width: 100%;
border: 1px solid;
Then your element will take up 100% width + 2 pixels.
It sounds like you have your sidebar occuring first in the source order.
If you have the two divs (sidebar, main) floated in different directions, then look at the width avaiable they are sharing. Reduce the width of one div (you should have width set on your floats) until their combine width, including padding, margin, borders fits in available space. (I will only use width in my example for brevity).
When this effect happens, in my experience, the one occurring later in the source order is the one that gets prevent from sliding up into it's spot by too much width.
<div id="container">
<div id="header">head</div>
<div id="sidebar">side</div>
<div id="mainContent">main</div>
</div>
Width of #sidebar & #mainContent too wide (#mainContent gets bumped down):
#container{
**width:950px;**
margin:0 auto;
background:blue;
}
#mainContent{
float:right;
**width:651px;**
background:red;
}
#sidebar{
float:left;
**width:301px;**
background:green;
}
Width of #sidebar & #mainContent fit inside container:
#container{
**width:950px;**
margin:0 auto;
background:blue;
}
#mainContent{
float:right;
**width:650px;**
background:red;
}
#sidebar{
float:left;
**width:300px;**
background:green;
}
btw...if you floated the two elements in the same direction, but their combined width is too wide, the last one in the source order would fit underneath the above floated element.
Does your h1 or img have a top margin? It will stick out of the top of the mainContent div and push it down.