How to align a div holder to viewport and other div? - html

I doesn't know how to achieve the following. I have a section that holds 3 images. Those images will be responsive in that section. I would like to align the holder div to the left side of the viewport and the right side of the holder div to the container div. See image:
My markup looks like the following:
<section>
<figure>
<img src="http://placehold.it/400x210">
</figure>
<figure>
<img src="http://placehold.it/400x210">
</figure>
<figure>
<img src="http://placehold.it/400x210">
</figure>
</section>
Is this possible with css only?
CodePen: https://codepen.io/anon/pen/bWWyJN

Have you tried using flexboxes? Put display: flex; flex-direction: row; on your container and flex: 1 1 auto; on your children. (That should be a simple enough case for IE to get it right. :)

Related

Figcaption Makes Figures Vertical, I need them Horizontal

<figure>
<img src="imgsrc1.png" alt="image">
<figcaption>Caption</figcaption>
<img src="imgsrc2.png" alt="image">
<figcaption>Caption</figcaption>
<img src="imgsrc3.png" alt="image">
<figcaption>Caption</figcaption>
</figure>
<!--As you can see it makes the images aligned Vertically--!>
I have been attempting to have a part of my website where I have three images horizontally aligned with captions. I have decided to use the figure tag which has them horizontally aligned, however, when I add a figcaption they become vertically aligned (stacked on top of each other). This is not what I want and I don't understand why the figcaption does this. Can anyone tell me how to keep the images horizontally aligned?

Can't figure out how to align HTML/CSS Divs

I'd like to align horizontally an image and paragraph of text next to each other within my main div element of my web page.
The divs are wrapped like this:
<div id="main">
<div id="image">
</div>
<div id="paragraph">
</div>
</div>
Is this the right layout? If so, what CSS do I need?
You need to set both of the inner divs to
display: inline-block;
Check out this fiddle. https://jsfiddle.net/m8athtLp/light/
You can do using two way:
Firstly, From your markup, You can use css to float: left image and float: right paragraph.
Secondly,
<pre><div id="main">
<img src="images/img.jpg" alt="">
<p>your text</p>
</div></pre>
For this this code you can use float: left for image, paragraph text auto align right
Thanks

Relative positioning not working correctly CSS

so I'm trying to position my content box and its working fine for left, but when I try change the right value it doesn't allow. As you can see I have four images, but I want to show three, so therefore I'm trying to increase the right value so the box can only fit three (and also bring it in to the center a bit more)
I can get it to work by changing it to padding-right instead of right, but I don't understand why that works? My understanding is that : Padding = Distance between the content and the border, and right = how far from the edge?
Image:
This is my content box code (the images are inside it in another box)
.imagesArea {
position:relative;
top:15px;
left:100px;
padding-right:180px;
}
Thanks
edit: html (removed some of the image code)
<div class="imagesArea">
<div class="images">
<figure>
<img src="photos/image1.jpg" alt=”Photo” width=150 height=150>
<figcaption>Watch #1</figcaption>
</figure>
</div>
<div class="images">
<figure>
<img src="photos/image2.jpg" alt=”Photo” width=150 height=150>
<figcaption>Watch #2</figcaption>
</figure>
</div>
<div class="images">
<figure>
<img src="photos/image3.jpg" alt="Photo" width="150" height="150">
<figcaption>watch #3</figcaption>
</figure>
</div>
</div>
Your understanding of relative positioning is completely wrong. It sounds like you are confusing it with margins.
With relative positioning, the element is sized and positioned according to normal flow (i.e. as if it was statically positioned), and then the whole box is offset according to left/right/etc. This can cause it to overlap with other elements.
See this example for a visual representation.
It won't adjust the size of the box at all, so it will have no influence over how much content it can hold.
If you want to control how wide the element is, use width, padding, border and/or margin.
You can use margin for inner content div images
.images{
display: inline-block;
margin:0 20px 0 20px;
}
and set parent div
.imagesArea {
position:relative;
top:15px;
left:100px;
padding-right:180px;
text_align:center;
}
As you want to show 3 images in a row, It will work for you.

How do I horizontally center a set of 4 images inside a parent div with CSS?

How do I horizontally center a set of 4 images (one square block) inside a parent div with CSS? I also need the image block to occupy 100% of the screen vertically.
Thanks.
<div id="outer" style="width:100%">
<div id="photoBox" style="inline-block">
<img src="#">
<img src="#">
<img src="#">
<img src="#">
</div>
</div>
You should use
display: inline-block instead of inline-block css stylesheet
Look here

How to put div background on top of it's content

So i have one div and inside i have img tag. SO what i would like to do is put that div background on top of img, i know i could use another div with absolute position to do that but maybe it's possible to do it with only 1 div?
This is my code:
<div id="container">
<img src="image.jpg" />
</div>
EDIT Sorry for explaining it all wrong, but i want to background over the image, and from what i can see right now it's not possible without extra div.
Simply put, you can't with that code.
The best you could do is use some positioning and z-index properties within a single div.
<div id="container">
<div id="cover"></div>
<img src="image.jpg" />
</div>
Then use CSS to move the cover div above the image.
You can use css to attach the background for div like
background: url(images/myimage.png) no-repeat center top;