Float image going out of section [duplicate] - html

This question already has answers here:
What is a clearfix?
(10 answers)
What methods of ‘clearfix’ can I use?
(29 answers)
Closed 1 year ago.
I am trying to allign both img and text into one where image floats to left and text floats to right. The results I am trying to achieve:
And this is my result:
As you can see my image is going out of section for some reason
My current code:
#intromessage {
border: 1px solid #cccccc;
text-align: right;
}
img {
float: left;
width: 50%;
border: 1px solid #cccccc;
}
<section id="intromessage">
<h2>WELCOME TO BOOTWORLD</h2>
<p>
BootWorld is the largest online footwear retailer in the UK. <span> Our shop </span>always has stock of the latest designer footwear
at the most competitive prices. Want to know more about us or our products, why not
<span>send us a message.</span>
</p>
<img alt="shoes" src="images/boots.png">
</section>

Use display:flex; on the parent elements and wrap the h2 and p tag in a div so the two child divs in the parent element display as a flex row. The id='cont' element will have a display flex with flex-direction as column
EDIT: *as noted by the editor of this question, this question in its purest form does indeed have an answer which I will include for future persons looking at this answer...
The issue the OP was having is that they used a float on their img element. Without clearing that float their image was not floating to the left as they intended, but showing up underneath the sibling text content it was supposed to be floating to the left of. The image with the style float: left; is within the div intromessage, yet on the page it is outside that container div. Floated objects do not add to the height of the object they reside in. The issue was there was no clear: called on the float. To fix this we add an empty div element and style it with clear: left on a left floating div, or clear: right on a right floating div, or clear: both if you want to clear both the left and right float.
<div style="clear: both;"></div>
Important from MDN: The clear CSS property sets whether an element must be moved below (cleared) floating elements that precede it.
A more modern way to deal with this issue, is to use grid or flex, see snippit below:
#intromessage {
display: flex;
border: 1px solid #cccccc;
}
#cont {
padding: 5px;
display: flex;
flex-direction: column;
}
h2{
font-size: 1rem;
}
img {
width: 50%;
border: 1px solid #cccccc;
padding: 5px;
}
<section id="intromessage">
<img alt="shoes" src="https://cdn11.bigcommerce.com/s-h8hjw/products/927/images/735/WBHQ19-Retail-Product-OnWhite-Boots-M-1500x1425__00368.1599677007.475.500.png?c=2">
<div id="cont">
<h2>WELCOME TO BOOTWORLD</h2>
<p>
BootWorld is the largest online footwear retailer in the UK. <span> Our shop </span>always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why not
<span>send us a message.</span>
</p>
</div>
</section>

you can use grid view or flexbox to achieve that, but also you can go on with your code using position and define width of each element,
here is how to do it, try the snippet.
#intromessage {
position:relative;
width:100%;
border: 1px solid #cccccc;
}
p {
position: absolute;
margin-left:52%;
}
img {
position: relative;
width: 50%;
border: 1px solid #cccccc;
margin-left:1%;
}
<section id="intromessage">
<h2>WELCOME TO BOOTWORLD</h2>
<p>
BootWorld is the largest online footwear retailer in the UK. <span> Our shop </span>always has stock of the latest designer footwear at the most competitive prices. Want to know more about us or our products, why not
<span>send us a message.</span>
</p>
<img alt="shoes" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSg0p7vWEFpPD08JvLJgJsAKP0_EkTYg1v7og&usqp=CAU">
</section>

Related

How to center my photo when the width of my viewport is less than 1235px?

I'm creating my website and making it mobile-friendly with #media tags on CSS. I have an image of the empire state building that aligns to the right instead of center whenever the viewport is less than 1235px. I was wondering what the root of this problem is? I tried using a #media tag to center the image with "text-align: center;" but no luck.
It currently looks like this
The target image that I want to center is called "NYC_icon"
Here is my HTML:
<div class="section1">
<div id="NYC_icon">
<img src="C:\Users\LYind\OneDrive\Documents\Full-Stack Developer 2020 Course\Personal Website HTML\Images\home2.png"
alt="NYC">
</div>
<div id="Mini_Bio">
<h1>
Linda Ye
</h1>
<h2>
<i>NYC
</i>
</h2>
<p>
Aspiring <strong> coder</strong>, business
<strong> woman</strong>, avid
<strong> runner</strong>, and weekend
<strong> chef</strong>.
</p>
</div>
</div>
Here is my CSS:
.section1 {
margin: 80px;
padding: 30px 20px;}
#NYC_icon {
display: inline-block;
margin-left: 200px;
vertical-align: top;}
#media (max-width:1278px) {
#NYC_icon img{
text-align: center;}}
You can try applying the text-align: center to the div that contains the image. And also specify margrin: 0 when width of the screen is less than 1235px. so it allows that the image can be horizontally centered.
#media (max-width:1235px) {
#NYC_icon {
display: block;
margin: 0;
text-align: center;
}
}
First of all I would recommend that you head over to MDN and review the basics of layout. I do not understand what your are trying to do with the div which contains the image.
With regards to this particular case, experiment with the following changes:
Open the browser developer tools and inspect the element in questions. See what styles are applied.
I would recommend that if you are a beginner, set a 1px solid black border on all elements to visually see if what you are trying to do is working as you expect.
Finally, with regards to this particular problem, you can try many different things. I think that if you change the style of the img to {display:block; margin: 0px auto} it will be centered. Just drop the containing div altogether.
Also have a look at this resource.
The <img> is not centered at all, Not at more nor less than 1235px viewport.
I made the relevant changes to the code to make the images centered at all times, The code is heavily commented, If you have any questions please do ask.
/* To illustrate Not needed */
body * {
padding: 10px;
border: 1px solid;
}
/* To illustrate Not needed */
.section1 {
margin: 10px;
padding: 30px 20px;
}
#NYC_icon {
/* To let the element fill the space so we can center the img inside */
display: block;
/* text-align on the parent of the element we want to align */
/* text-align proerty only aligns inline level elements */
/* inline level elements are elements with display value
* set to inline or inline-[something]
*/
text-align: center;
/* margin-left: 200px; removed not needed*/
/* vertical-align: top; removed not needed*/
}
<div class="section1">
<div id="NYC_icon">
<img src="https://picsum.photos/300" alt="NYC">
</div>
<div id="Mini_Bio">
<h1>
Linda Ye
</h1>
<h2>
<i>NYC
</i>
</h2>
<p>
Aspiring <strong> coder</strong>, business
<strong> woman</strong>, avid
<strong> runner</strong>, and weekend
<strong> chef</strong>.
</p>
</div>
</div>

Footer issue: Text left, text right, image right, everything inline and collinear not working

I have been trying to create a new footer for my website that looks like this:
footer_nice
Unfortunately, I have only been able to recreate that in gimp, and not in html & css.
So far, I have been only partially successful. I have been able to align all the text and image so they are all collinear and inline, like this:
footer_bad
However, they are not separated into a left and a right. Whenever I try to float left or text-align right, or other combinations using divs and spans, it ends up breaking the inline property and the images and text are no longer collinear.
I have been able to seperate the text into left and right using seperate divs and spans, but only when they are not collinear, which is a bit of a bummer.
Here is my HTMl & CSS:
/* footer */
.middle > * {
vertical-align: middle;
}
footer {
color: #666;
font-size: 1.4em;
background: #191919;
border-top: 1px solid #444;
padding: 20px;
white-space: nowrap;
}
footer a {
color: #888;
display:inline-block;
}
footer a:hover {color: #BBB;}
footer img {
padding: 0px 0px 0px 4px;
}
<footer>
© <script>document.write(new Date().getFullYear());</script> WEBSITE
BUILT WITH CSS & HTML. OPTIMIZED.<span class="middle"><img src="https://placebear.com/32/25"/></span>
</footer>
Is there something I am missing? Is it some simple css that I am just forgetting? Any input would be fantastic. I hope this does not come across as a stupid question. I looked around a bit on here and w3schools and could not come to a conclusion. Thanks everybody!
Add to your HTML:
<div class="float-right> class containing your text & img that goes on the right
To your CSS:
float:right to your footer img
and
.float-right {float:right;}
Note that it may have responsive issues when viewed on mobile, but it's a quick-fix for desktop sized.
Do not forget to clear your floating elements after.
I troubleshooted some more. this is another potential solution, but the right side overflows and doesn't stay bounded to the right side of the footer.
.middle > * {
vertical-align: middle;
}
body {
padding: 20px;
background: #eee;
}
div {
display: inline-block;
margin: 0;
width:100%;
text-align: right;
}
footer {
margin: 0;
padding: 10px;
background: white;
white-space: nowrap;
}
footer a{
display: inline-block;
}
<footer>
© <script>document.write(new Date().getFullYear());</script> WEBSITE
<div class="float-right">BUILT WITH CSS & HTML. OPTIMIZED <span class="middle"><img src="https://placebear.com/32/25"/></span>
</div>
<div class="clearer"></div>
</footer>
I was not able to resolve the overflow issue with this particular solution, but as I was working on it I thought of a fix for the collinear issue with the solution offered by BrainHappy. If I add a dummy image to the left side of the footer which is the same height as the image on the right side of the footer, this would resolve the collinear alignment problem of the text and the image. This dummy image would be the same color as the background of course. depending on placement, you could adjust the padding to compensate for the presence of this dummy photo. example:
derp_fix
This solution works, but it is far from elegant. I feel dummy images are bad practice, so I may forgo images in the footer altogether. If anyone else has any other suggestions I am all ears. Thanks!

Is there a way I can make only one CSS style class to accommodate different section tiles on a web page?

I am working on a web page with various section titles: About, Projects, Contact, etc.
These titles will be on top of a background image. I want them to stand out. So, I want to fill the background with white.
(The titles' text are dark blue.)
The problem is that, if I only designate a background-color, the elements stretch across the page. I need them to each have a custom width (with the 3px padding of white around them). Do I have to have a separate CSS style class for each title with a width designation?
The titles are all < h3 > elements.
Here is the CSS style I have now:
.sectionTitle{
background-color: #ffffff;
padding: 3px;
}
Your h3 tags stretch across the page because they are block elements (naturally 100% width of parent).
If you force your h3's to display as inline-block elements, their width will shrink to the minimum needed to accommodate the text node within - I imagine this is what you are trying to achieve.
body {
background: #e6e6e6;
}
.sectionTitle {
background-color: #ffffff;
padding: 3px;
display: inline-block;
}
<h3 class="sectionTitle">
Some title
</h3>
Of course this can potentially cause issues depending on the rest of your markup so you may have to wrap your h3 in a block element such as a div to keep your title in it's own row.
body {
background: #e6e6e6;
}
.sectionTitle {
background-color: #ffffff;
padding: 3px;
display: inline-block;
}
<div>
<h3 class="sectionTitle">
Some title
</h3>
</div>
If you want each title to have different padding you can just create a separate class for the color and padding.
.sectionTitle{
background-color: #ffffff;
}
.padding3{
padding: 3px;
}
.padding3{
padding: 2px;
}
Then assign the color class to each heading and the specific padding class
<h3 class="sectionTitle padding2">Hello</h3>
<h3 class="sectionTitle padding3">Hello</h3>
Or if you want each heading to have the same padding just assign them all to the css class you have provided above.

Span style float:left is breaking div block [duplicate]

This question already has answers here:
Floating elements within a div, floats outside of div. Why?
(11 answers)
Closed 7 years ago.
I'm working on maintaining a bit of code that's out of whack at the moment. Basically, we have a <div> tag with it's own style settings, and we have multiple logic tags that will display different <span> tags, which will hold different bits of data.
What I'm seeing is that when I'm using a <span> tag with a style setting float: left; this is causing the <div> tag's color box to not wrap around the <span>.
Here's a sample of the code:
<div id="testData" style="padding:4px; width: 100%; border: 1px solid #999; background: #d1d1d1; text-align:right;">
<span style="padding: 3px 1 1 1; float:left;">
TestData: Float Left
</span>
</div>
I need this span tag to go left, due to requirements. Was wondering what my options are for this to work?
Original jsFiddle
Add overflow:auto to the parent div:
#testData {
overflow:auto;
}
jsFiddle example
Other way is to make use of clear: both
#testData:after {
clear: both;
display: block;
content: "";
}
Fiddle
Other solutions:
Using overflow: hidden
#testData {
overflow: hidden;
}
Or making a dummy element <div class="clearBoth"></div>
HTML
<div id="testData" style="padding:4px; width: 100%; border: 1px solid #999; background: #d1d1d1; text-align:right;">
<span style="padding: 3px 1 1 1; float:left;">
TestData: Float Left
</span>
<div class="clearBoth"></div>
</div>
CSS
.clearBoth {
clear: both;
}
http://jsfiddle.net/gLfw5wc7/3/
#testData {
padding:4px;
width: 100%;
border: 1px solid #999;
background: #d1d1d1;
text-align:right;
}
#testData:after {
content:"";
clear: both;
display: table;
}
#testData > span {
padding: 3px 1px 1px;
float:left;
}
This is known as a clearfix. When floating an element, it gets out "the flow" of the document. This also means that its width and height aren't taken into account by the parent. That's why #testData seems to collapse: it thinks it doesn't have content. To fix this there are some options. The easiest is to use overflow, however, that's bad practice imo. In this particular case it works, but in some other cases you won't be able to use it because content that overflows the parent will either be hidden (overflow: hidden) or a scrollbar will appear (overflow: auto).
The most common and proper solution is to use a pseudo element to fix this. :after is such a pseudo element (see this question for :after vs ::after). Basically, a pseudo element can create an element in CSS that is not visible in HTML.
Every time you use float, you'll be needing a clearfix. Therefore it's useful to create a .clear class which you can apply to every element that needs to clear floats. It would look like this.
HTML
<div id="testData" class="clear">
<span>
TestData: Float Left
</span>
</div>
CSS
.clear:after {
content:"";
clear: both;
display: table;
}
Now you can add class="clear" to every element that needs to be cleared. If you are into SASS, you might find this answer helpful but considering you are new to HTML, I'd suggest sticking to HTML and CSS first.

I can't get two divs to be beside each other?

I am trying to put two divs beside each other and have it so when you hover over an image some text is displayed. This is my CSS:
.german img, chembond img {
height: 100;
width: 100;
padding: 2px 2px 1px 2px;
}
.german img:hover, chembond img:hover {
border: 1px solid #2e8ece;
border-radius: 10px 10px 10px 10px;
}
.german-content, .chembond-content {
display: none;
}
.german:hover .german-content {
display: block;
float: left;
border: 1px solid;
}
.chembond:hover .chembond-content {
display: block;
float: right;
border: 1px solid;
}
.german-content p, .chembond-content p {
font-size: 15px;
font-weight: normal;
line-height: 30px;
word-spacing: 5px;
color: black;
}
.chembond {
float: right;
}
.german {
float: left;
}
.german, .chembond {
display: inline;
overflow: hidden;
}
And this is my HTML:
<section id="projects-content">
<p>Projects</p>
<section class="german">
<img src="assets/img/german.png" height="60" width="50" />
<section class="german-content">
<p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it here (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
</section>
</section>
<section class="chembond">
<img src="assets/img/german.png" height="60" width="50" />
<section class="chembond-content">
<p>I started this project because I have seen many students in my German class keep on getting the tenses wrong by putting verbs in the wrong places, missunderstanding past participles etc... so I started this to help students (or anyone) understand the sometimes confusing German tenses. Each tense page consistes of three sub-sections: a question, an answer and a statement. These then in turn include an example and an explanation. If you were to hover over some of the words then a popup box will appear, explaining the use of the word. You can see it here (please bare in mind that this is still a work in progress). If you want to email me a tip about it, or just ask me about it then don't hesitate to contact me.</p>
</section>
</section>
</section>
This is what it currently does: http://www.penguinie.co.uk/#projects
Also, Is there an easier way to do what I'm trying to do? (which is to put both of the images side by side and have them stay side by side when I hover over them and the text appears).
Use display:inline-block; instead of display:block; on the divs.
Using display:inline-block you can still assign width to an element, unlike display:inline. Block level elements will always take a new row.
However, you might notice that there's space in between:
If needed, this can be easily fixed by applying this to the parent element: font-size:0;.
Here's a fiddle about it.
In general, I use #Christian's inline-block solution.
But another possibility is using float: left.
Remember to clear the floating (e.g., with <div style="clear:both"></div>) after your floating elements.