Write the following css code for TitleHeader. Delete css codes for child items.
.TitleHeader {
display:flex;
justify-content:space-between;
}
Solution 1 :
Solution 2 :
I finally figured it out so am posting here in case others have the same struggle! It was in large part thanks to bayburtlu’s previous answer as I had never heard of flex before.
I don’t see much difference between this and what bayburtlu suggested so it’s not clear why that didn’t work. Also, I was able to eliminate the div tags surrounding each image and use only the img type for the alignment but if trying to align text, then div or some other tag will likely be required. Part of the issue was due to my lack of understanding of child pseudo-classes and I still don’t understand them well but this does work.
.TitleHeader {
display: flex;
justify-content: space-between;
width: inherit;
position: relative;
margin-bottom: 15px;
}
.TitleHeader img:nth-of-type(1) {
text-align: left;
left: 0;
}
.TitleHeader img:nth-of-type(2) {
text-align: right;
right: 0;
}
The HTML itself is very basic:
<div class="TitleHeader">
<img src="/images/image1.jpg" alt="Image 1">
<img src="/images/image2.jpg" alt="Image 2">
</div>
Problem :
I’m trying to align two images, one on either side of the page within a div and, while I’ve used nth-of-type before for this sort of thing, I can’t seem to get it working now! The images are on top of one another in the upper left corner of the container. These shouldn’t need float but when I was still unable to get it to work, I added it so clearly I’ve done something wrong.
div.TitleHeader {
width: inherit;
position: relative;
margin-bottom: 50px;
}
.TitleHeader img {
position: absolute;
top: 0;
}
.TitleHeader img:nth-of-type(1) {
clear: both;
float: left;
left: 0;
}
.TitleHeader img:nth-of-type(2) {
clear: both;
float: right;
right: 0;
}<div class="TitleHeader">
<div><img src="/images/image1.jpg" alt="Image 1"></div>
<div><img src="/images/image2.jpg" alt="Image 2"></div>
</div>Comments
Comment posted by TylerH
Hi Don, we need to see your HTML to be able to help.
Comment posted by DonP
@TylerH it was posted in my answer from a few minutes ago but I’ll revert it to the way it was and post it to the original question too.
Comment posted by TylerH
The information needs to be in the question; while it’s OK to self-answer a question, the question should have all the necessary info for providing a solution, otherwise it’s not fair to other potential answerers; it’s like trying to play from half a deck of cards, so to speak.
Comment posted by DonP
That was something I hadn’t yet tried but unfortunately it didn’t work and they are still on top of one another and I. As an aside, my editor highlights valid CSS but it doesn’t recognize justify-content. Is that something new?
Comment posted by DonP
Sorry, it posted itself while I was typing. I was adding, . . . and I verified that there are no closed divs interfering, or at least none I could find.
Comment posted by by-brt
I corrected the code. I misunderstood. please try again it should work
Comment posted by by-brt
It’s difficult to align using float. You can choose flexbox instead. By typing display: flex in TitleHeader, you gain flexibility in this div. By typing justify-content: space-between, you align it with a space between its elements in the div (TitleHeader). Since there are two divs in div.TitleHeader, one image will be aligned to the right and the other to the left.
Comment posted by DonP
To clarify, there are no divs within .TitleHeader as I am using
Comment posted by DonP
I ended up putting back the div tags around each image and referencing div rather than img because with img, the shorter of the two images was being stretched to match the taller one. Putting it into a container stretched the container rather than the image itself.