HTML make child div expand beyond parent div (without width: 9999px) - html

I'm having a hard time with HTML/CSS now. I'd love to create some sort of a slider with images placed side by side with hidden overflow (so when you press "next" arrow it will "move" pictures to the left (hiding the left one and showing the one that was hidden).
The problem is I can't make my div to go beyond its parent thus I can't line up my images side by side.
It looks like this:
<div id="slider">
<div id="images">
<div class="image_container">
<img src="" alt="1"/>
</div>
<div class="image_container">
<img src="" alt="2"/>
</div>
...
<div class="image_container">
<img src="" alt="3"/>
</div>
</div>
</div>
Where #slider should be at 95% of width and preferably height based on content,
#images should have "no width" - it should be based on the content and max-height~, .image_container should have the width of the img - these should line up one next to another.
Any ideas how can I achieve that? I've been trying lots of things and none of them work.

Set the display property of the child elements to inline-block and the white-space property of the parent to nowrap.
#parent{
background:#000;
height:100px;
padding:5px;
white-space:nowrap;
width:200px;
}
#parent>div{
display:inline-block;
height:100%;
width:100%;
}
#parent>div:nth-child(odd){background:#f00;}
#parent>div:nth-child(even){background:#0f0;}
<div id="parent"><div></div><div></div><div></div><div></div><div></div></div>

Related

div inside a div 0 height

I created a div id="A" and div id="B" and placed the latter div inside div A. Div A has a background-color attribute, but the inside div shows up as its own separate div without the A's background-color. I thought a div within a div would take the attributes of parent div. Instead, div A shows up with 0 height on the browser. The divs below follow the same structure and are just named differently: 'AboutPictures'(A) and 'ya'(B)
<div id="AboutPictures">
<div id="ya">
<img style='border:5px solid #F00' src="http://41.media.tumblr.com/3ad1ef80a08560a7e5f6be2b31f13c2/tumblr_n5wto2Ukmf1txjmgjo1_1280.jpg">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<figure>
<figcaption>Hello I am Edward</figcaption>
</figure>
</div>
</div>
CSS:
#AboutPictures {
background-color: rgb(0,200,255);
height:100%;
}
#ya{
float:right;
}
#ya figure{
float:right;
}
Since your #ya div is floated, the parent div just sees empty content. You need to clear the #AboutPictures div, by applying the clear: both style. See: What is a clearfix?
Working example:
<div id="AboutPictures">
<div id="ya">
<img style='border:5px solid #F00' src="https://placehold.it/350x150">
<div style="clear: both;"></div>
<figure>
<figcaption>Hello I am Edward</figcaption>
</figure>
</div>
<div style="clear: both;"></div>
</div>
Hey there are different possibilities to solve this:
you could add a float: right / left; to your outer div (#AboutPictures)
or you could set it to display: inline-block;
See this fiddle: https://jsfiddle.net/8j2zpfdg/
Another SO answer as reference: How to make div not larger than its contents?

selecting position with respect to parent div

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.

How can one layer two aligned images in a scrolling <div> using CSS?

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.

Make empty div background colour fill entire div vertically

I have a div inside a div and I want the inside div to either contain a background colour or background image. My code is:
<div class="row two">
<div class="cols n15">
<h2 class="latestVideo">Latest Video</h2>
<iframe width="100%" height="370" src="//www.youtube.com/embed/a-XQL60NVmQ" frameborder="0" allowfullscreen></iframe>
</div>
<div class="cols n9 clearfix">
<h2>Other Videos</h2>
<div class="otherVids">
<p>"test"<p>
<!-- <img src="images/otherVideos.jpg" alt=""> -->
<div class="video1">
</div>
<div class="vidoe2">
</div>
<div class="video3">
</div>
</div>
<div style="clear:both"></div>
Right now this makes it look like this:
What I want is for the red box to extend all way down and match the height of the div on the left side. I realize that this would work if I have the div(otherVids) a height and width, but if I do this the website won't be responsive anymore.
So if there anyway to make the div background fill up the empty space while still remaining responsive?
Here is the CSS code I have:
.otherVids{
background-image: url('images/otherVideos.jpg');
background-color: red;
width: 100%;
height: 100%;
}
Try setting the height of otherVids to be equal to the iframe.
Add height:370px; to the css of .otherVids
You can try two method,the first thing is:
.otherVids{
min-height:370px;
}
or:
.otherVids{
height:370px;
overflow-y:scroll;
}
if your video list is to many,you need to design the content responsive.
finally,I think you don't need use width:100%,because div is block element.

Cannot center div tried floating to left text align margin:auto just wont work

Cannot center div tried floating it and using text-align:center; margin:auto doesn't work please help me I can't figure this out. I will paste the code and a link for the jfiddle.
It looks fine in Jfiddle but it actually isn't I don't know why. I'm using Chrome
Fiddle
<div class="wrap">
<div class="top_portion">
<div class="logo">
<img src="img/2a685fsaq.png"/>
</div>
</div>
<div class="center">
<div class="cleft_portion">
<img src="img/5.png" />
</div>
<div class="mid_portion">
<img src="img/css.png" />
</div>
<div class="cright_portion">
</div>
</div>
<div class="bottom_portion">
</div>
</div>
I think i gave the same solution, in this question of your Can't get right portion of middle to stay on the right ...considering your markup display:table is a better option (if you can ignore IE8-)
display:table is compatible(IE8+) overall with minimal css
see demo here
HTML
<div class="center" style="display:table">
<div class="cleft_portion" style="display:table-cell">
</div>
<div class="mid_portion" style="display:table-cell">
</div>
<div class="cright_portion" style="display:table-cell">
</div>
</div>
I have removed the floats and added table display...its better if you are looking for IE8+ browsers!!
EDIT
considering your current markup, these might be faults
.center {
margin: 0 auto; /* u have mentioned only auto here */
width:1200px;
}
and add this on top of your css :
html, body {
width:100%;
height:100%;
}
working demo
make the width 100%
go to that div you want to center and write:
width:100%
or play a bit with the widths so that it centers itself
Leave text-align:center and margin:auto;
if it's still not centered you can always play with margin-right/left as long as it UNDER the margin: 0 auto;
also if you are going to do a float best have:
overflow:hidden;
and play with the height as not to have overlappings
text-align:center will not work as you are using images in your code.
if you wish to use margin:0 auto you should have to give a width to the container which you want to be in center, as the container by default takes the width of the container and margin:0 auto applied cant be seen.