Member Avatar for beforetheyknew

I I'm pretty new to css, for uni we have to design this website (as specified and without moding the html) and im having trouble with a few things. I cant really post the code because none of the images will work (they are stored and passworded on the university server).

I have a few problems, for one i dont think i fully understand the float commands. I have floated these images so they sort of cascade side by side till the end of the page(they have paragraph tags so i stated that this divs p should float left), then the next line so on till they're done. Then in the next section, there are a different set of images, but the title is by the side of the first section of images (not starting a new line). Is that a positioning thing?

Can anyone help me with that? thanks in advance.

  • 5 Contributors
  • 4 Replies
  • 107 Views
  • 20 Hours Discussion Span
  • Latest Post Latest Post by Hangfire

Dani AI

Generated

Floats remove an element from the normal flow, so following content can flow up beside them instead of starting below. That is why your next section title sits beside the floated images. A manual line break (as suggested) will work but is fragile; inserting an extra empty block to clear the floats (like mentioned) also works, and making the parent contain its floated children (the point made) is the cleaner solution.

A robust, widely used fix is the clearfix pattern. Add a small utility class to the container that holds the floated images:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Apply that class to the wrapper around your floated paragraphs/images so the wrapper expands and the next section naturally starts below the images.

Modern alternatives avoid floats entirely. Two simple choices:

/* make the wrapper a new block formatting context */
.wrapper {
  display: flow-root;
}

or use flexbox to lay the images out side-by-side and wrap automatically:

.row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.row img { display: block; }

Troubleshooting checklist: confirm you actually floated the elements you expect (float on the image or its direct container), check computed widths so items wrap where you expect, and inspect the heading to make sure it is a block-level element that should clear floats. If posting markup for help, remove sensitive image URLs and replace them with simple placeholders or filenames so others can reproduce the layout. If using Bootstrap, prefer its grid or utility classes rather than manual floats for a more predictable layout.

Recommended Answers

All 4 Replies

Member Avatar for ndeniche

have you tried separating the title from the image with a <br /> ?

Edited by ndeniche because: n/a
Member Avatar for rudevils

i really dont know about your html code.
here's what i've done with float problem
try to add new div under your paragraph and images ( which is float left )
the div will look like this :

#divname{
		clear: left;
}
Edited by rudevils because: n/a
Member Avatar for macneato

Don't worry about the images, just post your source

Member Avatar for Hangfire

I usually find that when I float a load of images or list items, the containing div or list needs to have overflow:hidden added to the CSS.

Floating disrupts the natural flow of the document, adding overflow hidden to the container allows the document to re-flow after you've disrupted it. (That made more sense in my head)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.