I Want to place a div over another div without using height in pixels.I have used this code
<div style="position: relative;height:78px;">
<div style="width:425px;position: absolute;top: 0;left: 0;">
Content for First div
</div>
<div style="z-index:10;position:absolute;top: 0;left: 0;">
Content for Second div
</div>
</div>
The first div content will change dynamically . So is their any way to put height auto some thing like in parent div
both child divs are taken out of the flow, so the parent will have no natural height (which normally is "stretched" by it's children).
since you have pre-loaded data on the first child div, make the second match to it.
HTML:
<div id="parent">
<div id="firstChild">
Content for First div
</div>
<div id="secondChild">
Content for Second div
</div>
</div>
CSS:
#parent{
position:relative;
}
#firstChild{
width:425px;
}
#secondChild{
width:425px;
position:absolute;
top:0;
bottom:0;
}
NOTE: watch out for collisions in your styles, i used ID here. replace accordingly
height: 100% should make it the height of the parent div which is 78px;
Related
I'm new to HTML did some research in w3school but not clear about how put image on this three different position on this background image in one div. I marked the position I need to put the image. The div will cover entire page in webkit and moz based browser. Consider any width and height of div. How you fixed position with respect to your considered width and height. I can't put background image to entire html or body or etc. It have to in one div or section only.
<div id="page1" style={"background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div class="">
<!-- Content Goes Here -->
</div>
</div>
This is a very simple way to achieve that using relative CSS positioning.
You can use a background div, and inside of it place the divs you need.
*{
margin:0;
padding:0;
}
.background{
background:url('http://lorempixel.com/1000/1600/nature');
background-size:cover;
height:100vh;
width:100%;
}
.img1,
.img2,
.img3{
position:relative;
width:300px;
height:150px;
background:url('http://placehold.it/300x150');
}
.img1{
top:20px;
left:350px;
}
.img2{
top:150px;
left: 20px;
}
.img3{
top:350px;
left:150px;
}
<div class="background">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
</div>
If you wish you can have a look at multiple images backgrounds, here: http://www.w3schools.com/css/css3_backgrounds.asp
i would set up the html like this:
<div id="navbar">
<div id="image1" style=""></div>
<div id="image2" style=""></div>
<div id="image3" style=""></div>
<div>
<p>Text in navbar</p>
</div>
</div>
For each id "imageX" you could set a background-image then. And with display: inline-block, width and position you can put them where you want.
There are multiple ways to achieve that.
You can set the position of your div to absolute and adjust it to the position you'd like it to be
#div1 {
position : absolute;
left : 100px;
top : 200px;
}
You can also set the position to relativeand have your div placed relatively to its normal position.
You can check this for more information on the position property;
You could insert DIV within DIV. And you could position DIV using the top and left style attributes.
<div id="page1" style="{background:url('http://s27.postimg.org/r5v9ymd77/pg3bgl.png');background-size:cover;}">
<span class="">Page 1</span>
<div id="subpanel_1" style="top:20px; left:102px;>
<!-- Content Goes Here -->
</div>
<div id="subpanel_2" style="top:200px; left:50px;>
<!-- Content Goes Here -->
</div>
</div>
Of course, instead of writing the style definitions inline, better put them in a separate <style>…</style> block.
I've managed to position two divs next to each other by using the following code however my left div won't allow a height:100% and seems to be defaulting to auto, how can I set the height to 100% with my current setup?
css:
.left_div
{
width:30%;
height:100%;
padding:10px;
text-align:center;
float:left;
overflow:hidden;
}
.right_div
{
word-wrap:break-word;
float:left;
width:65%;
margin-left:15px;
overflow:hidden;
}
html:
<div class='panel-body thread-body'>
<div class='panel panel-default original-post-panel'>
<!-- dynamically generated content -->
<div class='panel-body'>
<div class='left_div'>
<!-- dynamically generated content -->
</div>
<div class='right_div'>
<!-- dynamically generated content -->
</div>
<div style="clear:both">
</div>
</div>
</div>
Height of the floating divs doesn't goes up to the parents.
Thus, the height of the parent div will be 0.
Thus, the height of your left div will be also 0 if its height is set to 100%.
Thus, the content of your left div will overflow, and it will be visible only because of this overflow.
The simplest solution for your problem would be if you would put an empty div with clear: both after all of them:
<div class="left_div">...</div>
<div class="right_div">...</div>
<div style="clear: both"> </div>
Effectively, it will be a similar effect as if you would start an empty "new-line" (despite there is no textual line rendering here).
I would like to layer two aligned images in a scrolling <div>.
At first I tried:
<div style="width:300; height:300; overflow:scroll;">
<img src="bottom.jpg"
style="width:400; height:800">
<img src="top.png"
style="width:400; height:800; position:absolute; top:0; left:0;">
</div>
(this is a simplified example -- the actual site has a separate CSS sheet etc.)
I would like the two images to behave as one when the <div> is scrolled, but the "absolute" positioning of the second image causes it not to scroll at all and to go outside the borders of the <div>.
I have also tried changing the style of the second image to:
<img src="top.png"
style="width:400; height:800; position:relative; top:-800; left:0;">
but then there are 800px of extra white space in the bottom of my <div>.
Is there any CSS I can use on the second image that will align it on top of the first image and still allow both of them to be scrolled together?
[update] The working solution is at ozake.com
you just need to add position: relative to the parent (div). When you use position:absolute if you do not contain that element in a parent set to relative it will contain itself within the body. SO what's happening is top.jpg is scolling with it's parent div but bottom.jpg is staying with the body. Once you contain them both inside the parent, then you can set the 2nd image to top: 800px to align it just below the other image
<div style="width:300; height:300; overflow:scroll; position: relative;">
<img src="top.jpg" style="width:400; height:800"/>
<img src="bottom.jpg" style="width:400; height:800;position:absolute; top:800px; left:0;"/>
</div>
FIDDLE
Do you want this: Jsfiddle
If so, here you go:
<div style="width:300px; height:300px; overflow:scroll;">
<div id="container" style="position: relative">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/c/ce/Petrus_Christus_-_Portrait_of_a_Young_Woman_-_Google_Art_Project.jpg/785px-Petrus_Christus_-_Portrait_of_a_Young_Woman_-_Google_Art_Project.jpg" style="width:400px;">
<img src="http://pixabay.com/static/uploads/photo/2014/04/02/17/07/hat-308003_640.png" style="width:250px; position:absolute; top:75px; left: 125px;">
</div>
</div>
Use some units in your style, for example pixels.
If you are styling element with position absolute it will be positioned relatively to the document itself, so you should set position: relative to a parent element to bind absolutely positioned element to this parent element and not to the whole document. In our case we made a container for our images with position: relative.
So we have the #container which is scrolling inside our overflow:scroll div, and our image aligned relative to this container.
What is the best way to write a div which has a width of 100% (the yellow-ish ones in the pic below), without breaking the flow of the document?
<div id="container">
<div class="big">
//content
</div>
<div class="small">
//content
</div>
</div>
css:
.big
{
background-color:#whatever;
}
.small
{
width:75%;
margin-left:auto;
margin-right:auto;
}
div {position:absolute;}
or
div {postion:fixed;}
will remove it from the document flow, but you may have to specify the left and top to put it where you want it once you remove it, depending on which one you use.
A div will automatically take up the whole width of it's parent (<body> in this case). If you insert
style="clear:both"
Into the div you'd like to stretch, it will ensure that it is not alongside any other elements (following the normal flow of the page) hence it will stretch the width of the body.
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
Why isnt the background color showing up in between those 2 divs?
When you float elements you should provide the width of the floated elements. Otherwise you may encounter unexpected behaviors accross different browsers.
Check this tutorial, there is good info on floating in css. [link is dead]
Basically, if you provide an overflow:hidden; to the container div and provide width to the floated elements, your problem will be solved.
<div style="overflow: hidden;">
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
</div>
Similarly, you can add another div wherever you want to normalize the flow ike this:
<div>
<div style="float:left; width: 300px;">Some text</div>
<div style="float:right; width: 300px;">Some text</div>
<div style="clear:both;"></div>
<div>This div will be at the same place
as if the previous elements are not floated</div>
</div>
Both will work :)
EDIT
Another method which I use frequently in these days is to float the first element and set a margin-left to the following element. For instance:
<div>
<div style="float: left; width: 300px;">Some text</div>
<div style="margin-left: 300px;">Some text</div>
<div style="clear: both;"></div>
</div>
The advantage of this method is that the following element (the second div in this case) does not need a fixed width. Plus, you may skip the third div (clear: both;). It's optional. I just add it in case that the floated div is longer in height than the second div since if you don't add it the parent div will always get the height of the second div.
Just set the container div to overflow: hidden;.
If you set elements to float they won't be in the normal 'flow' of the document anymore.
div { background: #ccc; overflow: hidden; }
And you didn't even made a freehand circle ;)
A floating element doesn't affect the size of the parent, unless the parent specifically contain the children using the overflow style.
Your outer div has the same background colors as the child divs, but the height of the parent is zero, so you don't see its background.
It's because both the divs are floated so the containing divhas no height. If you were to add a third child div whic wasn't a float, give it a height of 0 and clear:both you should see the background colour appear.
The white space you are showing is a body part and you set the background color to the div but not in the body. That is the reason the body part is empty.
To color the empty part you should add following code:
<html>
<head>
<style type="text/css">
div
{
background-color:#ccc;
}
body{
background-color:#ccc;
}
</style>
</head>
<body>
<div>
<div style="float: left;">This is a text inside a div element.</div>
<div style="float: right;">We are still in the div element.</div>
</div>
</body>
</html>
You can change the body background color by changing the background color in body style.