On the page there are two divs adjacent to each other. Now when I resize the browser, one of the div overlaps the other one. What I want is to move one of the div down (below the other div) when there isn't enough space to display both. Can it be achieved using css? How?
The body:
<div id="container">
<h1 align="center">Title</h1>
<div id="image1">
<img src="back1.png" alt="a" />
</div>
<div id="image2">
<img src="back2.png" alt="b" />
</div>
</div>
The CSS
#container {position: relative; height:800px; width: 720px; background: #f0f0f0;}
#container #image1 {position: absolute; top: 10%; left: 0;}
#container #image2 {position: absolute; top:0; right:0;}
Although you have not posted your code, I'm guessing that you style the div's by positioning them using relative or absolute positioning, which makes them overlap. I would instead use display:inline-block; to make adjacent divs in the manner you want.
Click here for an example of what I mean. Try resizing your browser to see that it works.
Is this example more of what you mean? I just used floats.
Related
I've made responsible web slide img with 3 parts of div, give them(.slide_centent) position absolute and the parent(.slides) position relative, after that the parent(.slides) doesn't have height anymore. i give it px,% height but when i reduce browser only div(.slide_centent) become reduce together with images, parent(.slides)' bottom fixed at the point, it make huge black which not look so good. any ideas?
here is HTML
<section class="slides">
<div class="slide_centent">
<img src="images/images1.jpg" alt="images1">
<button class="slidesbtn1">자세히 보기</button>
</div>
<div class="slide_centent">
<img src="images/images2.jpg" alt="images2">
<button class="slidesbtn2">자세히 보기</button>
</div>
<div class="slide_centent">
<img src="images/images3.jpg" alt="images3">
<button class="slidesbtn3">자세히 보기</button>
</div>
</section>
Here is CSS
section.slides {
width: 100%;
height: auto;
position: relative;
}
section .slide_centent{
width: 100%;
position: absolute;
transition: all 3s;
}
section .slide_centent img{
width: 100%;
height: 100%;
min-width: 1500px;}
When you add position absolute to an element, you remove it from the flow of the page, so other elements are 'unaware' of its presence. In your case, the 'slides' won't know about the 'slides_centent' (because 'slides_ceneten' is out of the flow of the page), and can't keep the height of children.
I think it would be better to try to avoid position absolute in this case, but there are some things you could try.
Take a look here: Make absolute positioned div expand parent div height
I've been asked to change my CSS for adding text to the top right of the screen on my website to use margins and padding instead of what I currently have. The CSS I currently have for doing so is thus:
<style>
.text-align-top-right{
position: absolute;
top: 10px;
right: 10px;
}
</style>
<div class="text-align-top-right">Some text to align top right</div>
How do I do the same thing above using margins and padding?
Thanks in advance.
This is a rather bizarre request and certainly not the way I would recommend positioning an element however if this is some kind of test one way to do this is with css calculations.
Determine the width of the screen and then adjust the offset by the size of the div being positioned.
You will need to know the width and height of the element being positioned in this scenario.
.text-align-top-right{
margin-left:calc(100% - 110px);
margin-bottom:calc(100% - 110px);
height:100px;
width:100px;
background:#b00;
}
<div class="text-align-top-right">TOP RIGHT</div>
You have used <div style="text-align-top-right">Some text to align top right</div> which is not correct. You should replace class attribute in place of style attribute and then you change margins and paddings accordingly to get the required result.
Changes made in HTML
<div class="text-align-top-right">Some text to align top right</div>
Changes made in CSS:
.text-align-top-right{
position: absolute;
top: 0;
right: 0;
margin-top: 30px;
margin-right: 30px;
}
And here is the working fiddle: https://jsfiddle.net/MasoomS/19Ly9f9t/
you can do it very simple way with below CSS, you create simple DIV and add CSS to it. Check below code :
#topRightDisplay{
position: relative;
}
#topRightDisplay p{
position: absolute;
top: 0px;
right: 0px;
}
<div id="topRightDisplay">
<p>some text...</p>
</div>
I bring here a drama with css height.
I would like to make a layout, a div that contains 2 divs both in same line, one is resizable and the other must fit in the parent's height (same height as the first one).
The first div can have additional information (so i can't fix the height), so it will have more lines, the important is that it must not have a scroll bar. The second div must obey the first height, if it's bigger than it will have a scroll bar.
<div class='container'> <!-- parent -->
<div class='left'> <!-- resizable -->
</div>
<div class='right'> <!-- same height as left div -->
</div>
</div>
UNSOLVED CODE
The problem is that i can't figure out how to make it just using css. Or even it's possible just with css. I would not like to use js.
Someone please help me!
Fiddle
What you do is make the right one absolutely positioned which stops its height influencing the parent's.
RELEVANT CSS
.container {
background-color: gray;
display: table;
width: 70%;
position:relative;
}
.container .left{
background-color: tomato;
width: 35%;
}
.container .right{
position:absolute;
top:0px;
left:35%;
background-color: orange;
width: 65%;
height:100%;
overflow-y: auto;
}
I couldn't seem to find a reference to this problem anywhere after lengthy searching. This probably means I am missing basic concepts but I am going to go ahead and ask anyway. I am trying to have a float:left <div> overlay a background image. A simplified version of the problem is below (with a div representing the image for quick reproducibility)
<div style='position: absolute; background-color: blue; width: 500px; height: 500px'>
BACKGROUND DIV
</div>
<div style='float: left; background-color: yellow; width: 100px; height: 100px'>
FLOATING IMAGE
</div>
It seems the absolutely positioned div overlays the float. How do I sort this out - without resorting to the background-image property of the parent (this is not an option) ?
Set position:relative; on the floating element and assign a z-index:1; to the background and z-index:2; to the floating image.
<div style='position: absolute; background-color: blue; width: 500px; height: 500px'>
BACKGROUND DIV
</div>
<div style='position:relative; float: left; background-color: yellow; width: 100px; height: 100px; z-index:2;'>
FLOATING IMAGE
</div>
EDIT: here's a jsfiddle for your reference: http://jsfiddle.net/exUm7/1/
Div overlay is not a good idea other than if you are doing game kind of thing. I think is batter if you plan your layout as much as without overlay. It will make you easy.
but if you must need to do this. Here we go
<div style='float:left; background-color:blue; width:500px; height:500px; z-index:1'>
BACKGROUND DIV
</div>
<div style='float:left; margin-left:-500px; background-color:yellow; width:100px; height:100px; z-index:2'>
FLOATING IMAGE
</div>
I'm thinking this isn't possible, but I'm not a CSS expert, so I thought I'd check. I've got a translucent div absolutely positioned over an image. That's good so far, but I'd like to force my translucent div to respect the box in which it and the image are contained.
<div class="parent">
<div class="title-bar"> /* prolly not important */
<h2>Title</h2>
</div>
<img src="whatever"/>
<div class="overlay">
A few lines of txt
</div>
</div>
The more I think about it, the more I think I may be asking for too much - I want the parent to expand with the img, but the overlay to be constrained by the parent. Can this be done?
To force the container expand with the child img, make it float.
To force the overlay relate to container position and size, make the container relative.
.parent {
float: left;
position: relative;
}
To force the overlay respect the bounds of the container, use percents.
.overlay {
position: absolute;
max-width: 100%;
/* And then, position it at will */
top: 0;
left: 0;
}
I've prepared an example: http://jsfiddle.net/rYnVL/
It's doable, but not quite beautiful :
<div id="parent">
<div id="abs">stuff fadsfasd fsad fasdsdaf </div>
<img src="/img/logo.png" />
</div>
#parent {width:auto; height:auto; border:1px solid blue; background-color:grey;position:relative; display:block;float:left;}
#abs {position:absolute;width:100%;height:100%;background:#ff0000;opacity:0.4;}
Main point to note :
parent floats to not have a 100% width. Position is relative.
abs is absolute, with 100% size.
also, if abs content is bigger than the image, it will overflow. If you do not like this, just add overflow:hidden.