I am having some problems with placing two divs one below another.
I tried out some solutions found in Stackoverflow like below.
But Nothing seems to be working.
Code:
#wrapper {
position: absolute;
}
#up {
position: absolute;
float: left;
}
#down {
position: absolute;
float: left;
clear: left;
}
<div id="wrapper">
<div id="up"></div>
<div id="down"></div>
</div>
Here's My Attempt,
Fiddle
Helps would be appreciated.
Remove the CSS. DIV tags are block elements and would naturally flow down the page. You are floating them which would cause them to be displayed side by side.
Especially remove the "float" attributes.
That's how DIV's work by default, just remove your css. See a working example here: jsfiddle
<div id="wrapper">
<div id="up"></div>
<div id="down"></div>
</div>
I'm not sure if you want the outer div to be greater than the height of the page, but that's what this does:
#DivSlider
{
width:100%;
position:absolute;
height:170%;
background-color:green;
}
#DivHome
{
height:26%;
background-color:orange;
border:1px solid black; /* You were missing the 'px' here */
}
#DivSkills
{
height:25%;
background-color:white;
border:1px solid black;
}
Related
I need to place a div stick to the right edge of its parent div and when re-sizing the browser window, it should overlap other elements in the same parent and they should be hidden.
This image tells the story
Please note that, I don't want that div to have fixed position. It should scroll just like others and the elements (texts or whatever) should be under it. Just like the attached image.
I tried the following code but, it made the red div stick to the edge of its grandparent.
.redarea{
position:absolute;
float:right;
}
What's the way of getting this done ?
This one does exactly what you want
#parent{
border:1px solid red;
width:100%;
height:60px;
position:relative;
white-space: nowrap;
overflow: hidden;
}
#rightchild{
top: 0;
width:100px;
right:0;
bottom: 0;
background:red;
position:absolute;
}
<div id="parent" style="">
<p>This area is getting hidden This area is getting hidden This area is getting hiddenThis area is getting hidden</p>
<div id="rightchild">
</div>
</div>
This is the easiest way to do it imo.
Give your outer box a padding on the right side, and let the inner box fill up the padding by giving it the same width and positioning it absolutely to the right.
<!DOCTYPE html>
<html>
<head>
<style>
div.outer{
width: 90%;
height: 30px;
padding-right: 30px;
position: relative;
border: 2px solid #ddd;
margin: 0 auto;
}
div.inner{
width: 30px;
position: absolute;
top: 0;
bottom: 0;
right: 0;
background: red;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
Thanks everyone, using all of your help, I managed to write this code. Let me know if it's illegal.
#parent{
border:1px solid red;
width:100%;
height:60px;
position:relative;
overflow:hidden;
white-space: nowrap;
}
#rightchild{
width:100px;
right:0;
height:60px;
background:red;
position:absolute;
}
p{
float:left;
}
<div id="parent" style="">
<p>This area is getting hidden This area is getting hidden This area is getting hiddenThis area is getting hidden</p>
<div id="rightchild">
</div>
</div>
Demo
You shouldn't even need a float on it. You would just need to have:
position: fixed;
right:0;
You may also need to specify a z-index on it depending how you coded it. If it's underneath instead of on top, do a:
z-index:14; or something of the like.
you can try to use display:inline-block too. see this fiddle: https://jsfiddle.net/ahmadabdul3/sasc1a7h/
keep in mind the calc() css property is not supported by all browsers yet (especially older ones)
To keep text on a single line: white-space:nowrap .
display should help you here to avoid the use of position: either table or flex :
.flex {
display: flex
}
.full {
white-space:nowrap;
}
.flex .full {
flex: 1;
}
.table {
display: table;
width: 100%;
table-layout: fixed;
}
.table p {
display: table-cell;
}
p {
border: solid;
}
.cds {
padding: 0.25em;
background: tomato;
width: 100px;
}
<div class="flex">
<p class="full"> text to spray in flex display text to spray in flex display text to spray in flex display </p>
<p class="cds">condense</p>
</div>
<div class="table">
<p class="full"> text to spray in table display text to spray in table display text to spray in table display</p>
<p class="cds">condense</p>
</div>
I've noticed that Chrome (34.0.1847.131 m) and Opera (21.0.1432.67) are creating an small gap between two divs when using the property display:table;. (and not when using display:block, for example)
Here's a fiddle reproducing it. (adjust the width of the panel, it doesn't take place with every width)
To reproduce it:
HTML
<div class="left"></div>
<div class="right"></div>
CSS
.left {
left: 0px;
}
.right {
right:0px;
}
.left, .right {
width: 50%;
position: absolute;
height: 350px;
background:#000;
display:table;
border-spacing:0;
border:0;
margin:0;
padding:0;
}
How can I get rid of this gap? Is this some kind of bug?
Changing table to table-cell seemed to do the trick:
http://jsfiddle.net/3z24S/7/
add 1 px to the placement of the right div:
.right {
right:1px;
}
http://jsfiddle.net/3z24S/12/
I have two potential solutions:
Option 1:
Use css calc(); to set the width of the two divs, like so:
Working Example 1
.left, .right {
width: calc(50% + 0.1px); /* Important bit */
position: absolute;
height: 350px;
background:#000;
display:table;
border-spacing:0;
border:0;
margin:0;
padding:0;
}
Option 2:
Use JavaScript to set the width of the two divs, like so:
Working Example 2
wid = function () {
$('.left, .right').width(Math.ceil($(window).width() / 2)); //Math.ceil() will round the value up
};
$(document).ready(wid);
$(window).resize(wid);
If you can get away with using calc() its probably the better option, using JavaScript seems expensive for something like this.
If it is a matter of vertical-align and known height, you can do without display:table/table-cell; DEMO or you could do without absolute position.
You may use inline-block, vertical-align and pseudo élément.
HTML :
<div class="left">
<div class='content'>
<p>content</p>
</div>
</div>
<div class="right">
<div class='content'>
<p>content</p>
<p>content</p>
</div>
</div>
the div.content will be inline-block or is display:table-cell in your problem.
CSS
.left {
left: 0px;
}
.right {
right:0px;
}
.left, .right {
width: 50%;
position: absolute;
height: 350px;
background:#000;
color:white;
border-spacing:0;
border:0;
margin:0;
padding:0;
}
.left:before,
.right:before ,
.content {
display:inline-block;
vertical-align:middle;
max-width:95%;
}
.left:before,
.right:before {
content:'';
height:100%;
width:0;
}
Even answering here to your question , i still do not understand why position:absolute; and still not sure if elements are suppose to have an known height. It looks more like you are not using the proper or best method to your needs.
The pixel bug is, in my opinion, already answered in comments and obviously a different way for chrome to handle this display value.
ello I'm new to html and css and tried to display a images that are floating right. Now I want to get the images under each other but is doesn't work. Can someone help me?
this my css code for the images:
.imagesLeft{
float: left;
margin: 5px;
}
.imagesRight{
float: right;
margin: 5px;
}
this my html code for the images:
<div class="imagesRight">
<img src="../images/medewerkers.jpg">
</div>
<div class="imagesRight">
<img src="../images/medewerkers1.jpg">
</div>
<div class="imagesRight">
<img src="../images/medewerkers2.jpg">
</div>
Thanks in advance !
If you want them to be stacked under each other you can use:
.imagesRight{
float: right;
margin: 5px;
clear: right;
}
Floating won't get the images stacked. For that, you'll have to use position:absolute, and top/bottom, left/right positioning. You can use z-index to change the stack order.
.imagesRight {
position:absolute;
top:0;
left:0;
}
Here is a fiddle demonstrating it. As per the comment below, placing a containing div with positioning to it may prevent future headaches. I've updated my fiddle to include that.
Cause your question was not real clear to me what you want with stacking I've created a little example with 3 different possibilities have a look at the fiddle.
the last two examples are probably the interesting ones. the styling looks there liks this:
.position-relative {
background-color:orange;
}
.position-relative img {
position:relative;
display:block;
}
.z-index {
background-color:gold;
position:relative;
margin:20px;
padding:20px;
}
.z-index img {
position:absolute;
top:0px;
left:0px;
border:2px solid red;
}
.z-index img.first {
z-index:3;
}
.z-index img.seccond {
z-index:2;
}
.z-index img.last {
z-index:1;
}
Maybe this fiddle can help you:
u don't have to use float this divs, because it's stacked.
fiddle example
Site: http://bit.ly/13nL8jV
Demo: http://jsfiddle.net/bBckp/
Brief: I am trying to get the CURRENT PROGRAMS to float under the SIGNATURE PROGRAMS with no luck. All of the columns in the footer have the CSS:
float: left;
width: 29%;
The columns are dynamic so I can't just wrap SIGNATURE and CURRENT in it's own div (I can probably hack it with JS)...CLARRIFICATION - I'm referring to the menus in the FOOTER.
Any thoughts how I can do this with just CSS?
You can tweak the element like so. This does leave a hole where it used to be, but that's what relative positioning does.
.item-130 {
position:relative;
left:-180px;
top:25px
}
Alternately you can set the parent UL to position:relative, and use absolute positioning:
.nav-pills {
position:relative;
}
.item-130 {
position:absolute;
left:0px;
top:25px
}
it may help you
html like this way;
<div class="wrapper">
<div class="SIGNATURE PROGRAMS">
..........
</div>
<div class="CURRENT PROGRAMS">
..........
</div>
</div>
and css
.wrapper{
overflow:hidden;
}
.SIGNATURE PROGRAMS{
float:left;
}
.CURRENT PROGRAMS{
clear:both;
}
EDIT:: if you cant change your html..then you may try this
.moduletable.current-prog {
position: relative;
left: -29%;
margin-top: 100px;
}
I have three divs:
<div id="login" />
<div id="content" />
<div id="menu" />
How would I define the CSS styles (without touching the HTML) to have the menu-div as the left column, the login-div in the right column and the content-div also in the right column but below the login-div.
The width of every div is fixed, but the height isn't.
#menu {
position:absolute;
top:0;
left:0;
width:100px;
}
#content, #login {
margin-left:120px;
}
Why this way? The menu coming last in the markup makes it tough. You might also be able to float both content and login right, and added a clear:right to content, but I think this might be your best bet. Without seeing the bigger picture, it is hard to give a solution that will definitely work in your case.
EDIT: This seems to work as well:
#content, #login {
float:right;
clear:right
}
More thoughts: The absolute positioning won't work (or won't work well) if you want to have the columns in a centered layout. The float seems to work - as long as you can get any border-between-columns type requirements to pan out with the float solution, you might be better off choosing that. Then again, if the site is supposed to be left align, I think that the absolute method would work very well for your needs.
Floats away... not perfect. Chris's answer seems a better solution.
#login {
float: right;
width: 400px;
border: 1px solid #f00;
}
#content {
clear: right;
float: right;
width: 400px;
border: 1px solid #f00;
}
#menu {
float: left;
width: 400px;
border: 1px solid #f00;
}
<div id="login">Login</div>
<div id="content">Content</div>
<div id="menu">Menu</div>