[SOLVED] Floating problem

[s_cristina]

Hi there :)

I have a little problem with the floating..
Doesn’t work how I expected..
I would like that the text first floats right, so it has the same line like the Menuline above. But if the window goes smaller it should change to float left.

Here is a little demo of my problem in codepen.
Just ignore my Logo position…

Thanks!

[Beverleyh]

Little demo?

Hmmmm, the idea is to provide a reduced demo in CodePen – just enough HTML and CSS to demonstrate the float problem, rather than dumping 8 thousand (and more) lines of CSS…

[s_cristina]

I tried to reduce more..

better?

[Beverleyh]

I think the main problem is that you’re setting container widths to fixed proportions using px values, so when there isn’t room for them to sit alongside each other, they break on to different lines. Try working with % instead so that they fluidly contract and expand along the same line. You probably also want to introduce something to make img elements responsive (max-width:100%?)

[s_cristina]

hmm.. somehow still doesn’t work :(

[Beverleyh]

What doesnt work?

Tip: make the img elements responsive.

Tip: use a media query to reverse the floats at the desired breakpoint.

[s_cristina]

Thanks for answering.

Well let’s say like this.. I am a beginner in coding and these to tips that you gave me, I don’t know how to do it. That’s why I am stuck.

I tried to put the max-width and all the width in % put it didn’t change to much. The only change is, that it doesn’t float anymore.

[Beverleyh]

You might want to re-read what I said about max-width ;)

This….

make img elements responsive (max-width:100%?)

The tip applies to the img element.

[s_cristina]

Ahaa know I see.. but what about my text issue?
It should go below the first img..

Thanks for your help!

[s_cristina]

Ahaa know I see.. but what about my text issue?
It should go below the first img..

Thanks for your help!

[Beverleyh]

I thought this was an exercise in floating left and floating right?

If you want the text to sit below the img, just remove/null the floats.

[Atelierbram]

With this design-pattern image-text using floats, best method is to use the so-called media-object, OOCSS by Nicole Sullivan IMO (one can use flexbox too but that is something for another demo). Read more about this searching for something like: “the media object saves hundreds of lines of code” site: stubbornella.org.

The second example in my fork of the demo uses this method. Note the HTML-markup differs a bit from the first example, and note the CSS-code is put within a media-query:

@media (min-width: 960px) {
  .demonstrations-media,
  .demonstrations-media_content {
    overflow: hidden;
  }
  .demonstrations-media_image {
    float: left;
    margin-right: 2em;
  }

}

http://codepen.io/atelierbram/pen/evoMPG/

[s_cristina]

@Beverleyh
Thanks for your fast answers and helping ! :)

@Atelierbram
That’s exactly what I’ve been looking for!
I thank you so much for helping me!
(I guess I told this a billion times but seriously.. Thanks)

[Atelierbram]

You’re welcome; take it easy (one step at a time ;)

[s_cristina]

How can I change the Title to Solved?

[Author]

Posts