I have a square div that is housing a javascript image slideshow. I incorporated a caption into the slideshow which requires the containing div to be position:relative. I then want text to wrap around this slideshow... is this possible?
My pseudo structure:
<div position:relative>
<div slideshow stuff>
<div position:absolute>Caption</div>
</div>
</div>
How can I wrap text around this?
Damn, it's always AFTER I post for help that I figure it out. Doh.
For those interested, this is my solution (again in pseudo code):
<div position:relative float:left margin-left/bottom:20px>
<div slideshow stuff>
<div position:absolute>Caption</div>
</div>
</div>
<div>this text now wraps</div>`
You need to float the div if you want to wrap text around it.
Related
How would you position elements in a relatively positioned div, and keep them the same distance apart without going out side of the box? I have a relatively positioned div and inside of it is a div(nameTabs) that spans 100% of the width. Inside of that div is taskstabtext, and tasksaddbox. Tasks tab text is positioned where it is and stays there. Button does not. What would be the cleanest way of positioning the two in a flexbox responsive div? Thanks
<html>
<body>
<div id="box" style="display inline:block; position:relative; left:10%; background-color:red;">
<div>
<div class="nameTabs tasksTab">
<div class="tasksTabText">
<p class="tasksBtnText">Name</p>
</div>
<div class="tasksAddBox">
<p class="tasksAddBtn">Last</p>
</div>
</div>
</div>
</div>
</body>
</html>
LINK - https://jsfiddle.net/9rqd9ot9/15/
I figured it out. For anyone with a similar issue, just use the justify-content:space-between;rule. It seperates the two and then you can set their margins from the edge.
LINK- https://jsfiddle.net/9rqd9ot9/38/
#align_text_center{
height:100%;
display:flex;
}
#aligned_text_h1{
margin:auto;
}
<html>
<body>
<div id="Container1">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
</div>
</div>
<div id="Container2">
<div id="align_text_center">
<h1 id="aligned_text_h1"></h1>
</div>
</div>
</body>
</html>
Welcome! I got again a bit problem while positioning the texts to it's position. I have a h1 element in the center of container1,container2 id's.
I want to align a second(and later a third) text below the first h1 element. I can't say it, so I made an interactive image about it. :(
Thank you for help! :)
I draw an interactive image,click here.
Place all the elements you want to position in the same div, and then position that div, rather than positioning each element separately.
I have a div surrounding multiple divs. The border of parent div is not covering all child divs as shown in the fiddle. Can anyone tell what is the issue here?
<div style="border:1px dashed gray;">
<div style="position:relative;top:10px;"><input type="text" placeholder="https://" /></div>
<div style="position:relative;top:30px;"><input type="text" placeholder="https://" /></div>
<div style="position:relative;top:50px;font-size: 10px">Some content</div>
<div style="position:relative;top:60px;background-color:#E6E0EC">
<div class="glyphicon glyphicon-remove"></div>
</div>
</div>
JSFiddle link
You are using position: relative on the divs not surrounded by the border. The relative position property moves the contents of the element but keeps the reserved space of the element in the normal flow.
If you want to achieve the same layout with a border around everything it is best to use the marginproperty. I updated your jsfiddle to show an example
JsFiddle
Well there is no need for position relative, in all the child divs, just remove those tags.
Using top to specify the spacing is not a good idea in a case like this. It will be fragile. Let the elements make room for themselves and let the box model make space in the parent. To do this use margin-top instead.
Fiddle: http://jsfiddle.net/markm/rmvneo88/
I have an image and one div.I want "text2" to come under "text1" .WHen I add clearfix the "text2" come under image .
I know that I can use "br" but is possible to have same effects without"<br>"
DEMO
Do you want text over image ?
if so you could use something position relative on div and position absolute on text, if text is still under image you can use z-index: 999 if you want to force text over image
Just add float: left to your child div element, like this:
<div>
<img src="http://lorempixel.com/100/80/" style="float:left">
<div style="float:left">
<span>TEXT1</span>
<div class="clear"></div>
<span>TEXT2</span>
</div>
</div>
Online example
I have a div inside which there are a couple of divs containing just plain text. but whenever the outer div is given a width, the child div also gets the same size. is there any way to not make this occur so that the child divs get covered for only the text inside it, while the outer div can have any size?
Use display:inline-block
HTML:
<div class="container">
<div class="text">text1</div>
<br />
<div class="text">text some text</div>
</div>
CSS:
.text{display:inline-block;}
Fiddle here.