Can someone please explain why this CSS code is not working?

#1

Why is the text not moving underneath the blue icon?

#2

Because of float: left; Remove it from icon and text.

#3

#4

Without a few words of explanation, it’s hard to know what you intend that image to convey, @mrivera . smile

You haven’t followed igor_g’s instructions and removed the float:left; from .icon.

You seem to be confused as to how float works, so this reference might help:

#5

The specific problem I have is that the blue box is supposed to represent shaped png graphic like an icon, the text can be any font, or another graphic with a transparent background. The orange box can also have a png, or svg background. I need to be able to position the text element on the same line as the blue box, and also underneath. In other words I need the text to be it’s own element, and icon to be it’s own element within the orange rectangle, and floated. Overflow hidden does not work.

#6

See my previous examples or look at this Instructor from Linkedin’s html, and css code. Say I wanted to add an icon to the left of the download PDF button? I don’t think her page seems structured correctly for more graphically intense pages. For example she has a col-narrow, and col-wide instead of breaking the page structure into more horizontal sections like col-allwrapper, topcol-narrow, top-colwide, etc. index.html (5.8 KB)
styles.css (2.3 KB)

#7

See my previous replies, and also tell me why is float left not allowing .icon to be displayed as a block element with or without overflow: hidden added to the CSS file please.

#8

I also tried clear: both

#10

I’m sorry, but I’m somewhat confused, as you seem to be asking different questions about different layouts.

If I have understood that requirement correctly, then you can do it very simply by floating the icon and only the icon.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Floated icon</title>

<style>

.box {background-color: orange;
	width: 40em;
	}

.logo {float: left;
	padding-right: 1em;
	padding-bottom: 1em;
	}
	
.more-content {background-color: yellow;}

</style>

</head>

<body>

	<div class="box">
	
		<p><img class="logo" src="https://placebear.com/100/100" alt="This is a logo" width="100" height="100">
		This is a paragraph with a lot of text.  It has so much text it will wrap round and below the icon.  This is a paragraph with a lot of text.  It has so much text it will wrap round and below the icon.  This is a paragraph with a lot of text.  It has so much text it will wrap round and below the icon.  This is a paragraph with a lot of text.  It has so much text it will wrap round and below the icon.  This is a paragraph with a lot of text.  It has so much text it will wrap round and below the icon.  This is a paragraph with a lot of text.  It has so much text it will wrap round and below the icon.  This is a paragraph with a lot of text.  It has so much text it will wrap round and below the icon.  This is a paragraph with a lot of text.  It has so much text it will wrap round and below the icon.  This is a paragraph with a lot of text.  It has so much text it will wrap round and below the icon.  This is a paragraph with a lot of text.  It has so much text it will wrap round and below the icon.
		</p>
	
		<div class="more-content">
		
			<p>This content is also inside the box, but separate from the paragraph with the icon.</p>
		
		</div>
	
	</div>

</body>

</html>

(For future reference, please post actual code, rather than screenshots, to make it easier for other people to copy and reproduce your issues.)

1 Like
#11

If I’m understanding, you may be missing an element (unless it can be done some other way).

I’m thinking you want the icon in an upper corner of the element with the background color, and text that is in the element with the background color to be below the icon.

If you have two <div>s with the default styling, the text will be below the icon, but the icon will not be “in the background color”. If you float the icon, it will be “in the background color”, but the text will not be below it.

I think if you are going to later want more inside “div.box” you are going to also need a “div.iconwrapper” and give it the same background color as “div.box” so it looks like part of it.

This way you can float “div.box” and / or “div.icon” if you want to and have “div.text” inside “div.iconwrapper” below “div.icon”

1 Like
#12

no no , inside “div.box” he is not going to need a “div.iconwrapper”

#13

No this is the last website that I fully coded years ago (see below). Back then there where really no mobile websites or free/paid online courses like Linkedin that I knew about. I coded this website, and paid for someone to teach me the coding, but the entire site was constructed using XHTML and CSS with every page section split up horizontally using divs, and floats displayed inline. I’m just learning about media queries, and things like that. But initially what confused me is the Linkedin Instructor’s HTML coding is not following the same order of the page graphically. She places the header section, and res info into 2 columns instead of coding a nav bar, header main image section, download button section, etc. stacked horizontally from top to bottom. The first person who showed me how to code years ago specifically told me that the XHTML code follows the page structure from top to bottom. I fixed the issue by placing the icon and download text element in the same element, and positioning that element to the bottom right like the button was, and floating the icon left. I probably have a code error but the page displays correctly now, and I’m learning flex, and grids, jquery, etc., Python, and then Bootstrap before I decide the best approach to constructing a responsive site the way I want to visually. You can see I understand graphic design, and drawing. I don’t necessarily want to be a coding expert just know enough to get basic certs as fast as possible. I prefer the visual portion, but Developers don’t really pay graphic artists to design their layouts, plus knowing the coding makes communicating easier. I’m also anticipating all this coding will again be modified in the future with sites like Wix mitchellcarlosrive.wixsite.com/mysite That site is not live yet. I am just learning as many mediums as fast as possible since free video instructions are now more abundant then years ago.

2008Site

#14

Hi mrivera,

The massive wall of text you posted isn’t helpful to anyone who would like to help.

Without knowing what you tried to say I broke your wall of text l in pieces quoted below that might make your message more accessible.

No this is the last website that I fully coded years ago (see below). Back then there where really no mobile websites or free/paid online courses like Linkedin that I knew about.

I coded this website, and paid for someone to teach me the coding, but the entire site was constructed using XHTML and CSS with every page section split up horizontally using divs, and floats displayed inline. I’m just learning about media queries, and things like that.

But initially what confused me is the Linkedin Instructor’s HTML coding is not following the same order of the page graphically. She places the header section, and res info into 2 columns instead of coding a nav bar, header main image section, download button section, etc. stacked horizontally from top to bottom.

The first person who showed me how to code years ago specifically told me that the XHTML code follows the page structure from top to bottom. I fixed the issue by placing the icon and download text element in the same element, and positioning that element to the bottom right like the button was, and floating the icon left.

I probably have a code error but the page displays correctly now, and I’m learning flex, and grids, jquery, etc., Python, and then Bootstrap before I decide the best approach to constructing a responsive site the way I want to visually.

You can see I understand graphic design, and drawing. I don’t necessarily want to be a coding expert just know enough to get basic certs as fast as possible. I prefer the visual portion, but Developers don’t really pay graphic artists to design their layouts, plus knowing the coding makes communicating easier.

I’m also anticipating all this coding will again be modified in the future with sites like Wix mitchellcarlosrive.wixsite.com/mysite That site is not live yet.

I am just learning as many mediums as fast as possible since free video instructions are now more abundant then years ago.

:wink:

3 Likes
#15

First and foremost 99% of websites are about providing information to a visitor (whether that visitor is human or robot (search engines for example) or requires ‘assistive’ technology because of a disability). Therefore the first step is to create logical content that makes proper use of the html language in a structured way. e.g. Use headings in a logical order, use ‘p’ elements for paragraphs, lists for lists and so on… In most cases html already has an element for the content you want to present.

Once you have your content logically described with your html then you can decide on how to manage it to create the display you want. There is often a small trade-off between semantic html and achieving a display that is only possible by manipulating the html order.

CSS grid makes it easier to create most displays without changing the order of the html to achieve it but does come with some complexity.

When you create a web page there will always be a hierarchy to your content that normally follows a logical progression. For example in a two column site the main column is usually the important stuff and the side column would be an aside or minor column. It would make no sense to code those horizontally in two columns each time. You would code the main column and then code the side column.

Historically it would be awkward to achieve column layouts without using floats and changing the order of the html but these days with flexbox and grid you don’t have to worry so much about that as you can move columns easily.

There are always going to be occasions when you need to massage the html to make it display as you want but your main focus should be on keeping true to the logic of the html. This makes it inherently accessible to all without doing anything special.

A lot of this comes with experience and practice and there is no magic solution except for common sense and hard work. To speak well you have to learn the language and that starts with the very basics of how to align things properly.

2 Likes