2

I did my homework on other StockOverflow posts, but couldn't find my answer. Basically I have two pieces of content 1) a project number and 2) a headline. In javascript I'm setting the width of the project number div to be one eighth of the window width (this works fine). Then I'm trying to place my headline to the right of it with a left margin of 15%. It looks fine, except when I reduce my window width- the headline jumps down outside of my projectContainer... The width of my projectContainerHeadline is 100% - and I've tried making this fixed - say 900px - and when i shrink my window it's fine - but when i increase my window size even larger it jumps out again when the headline goes past the 900px mark. I'm thinking there has to be something I'm missing in order to have a fluid width site work w/ these floats...Also overflow: hidden isn't helping the situation...In essence I want to have my headline div floated to the left without it jumping out of it's block/container. I need it floated left so that it's margin-left will dynamically update as the width of the left container changes.

My html code can be found here:

 <div class="projectContainer">
      <div class="projectContainerHeadline">
           <div class="projectNum">01</div>
              <div class="projectHeadlineText">
                 <h2>Test Headline</h2>
                 <h3>Test sub-headline</h3>
              </div>
           </div>
     </div>
 </div>

My css can be found here:

.projectContainer{width: 100%; float: left;}
.projectContainerHeadline{height: 130px; float: left; width: 100%; background-color: pink;}
.projectNum{font-family: Helvetica,Arial,sans-serif; font-size: 105px; text-align: right; border-top: 11px solid #d9a870; min-width: 100px; float: left;}
.projectHeadlineText{float: left; margin-left: 15%;}
.projectHeadlineText h2{background-color: blue; margin: 20px 0px 0px 0px;}
.projectHeadlineText h3{background-color: red; margin: 3px 0px 0px 0px;}
Robbie
  • 563
  • 7
  • 19
  • 3
    you cannot float percentuage width contents... – Andrea Turri Jul 07 '12 at 22:35
  • Andrea - thanks for the response. Are you saying I can't have my headline be a dynamic width if it's using float? If this is the case I need to make a new div container with a fixed width? Let me know if that's what you're thinking – Robbie Jul 08 '12 at 04:03
  • You can, but you need to do an offset. Look at this answer: [http://stackoverflow.com/questions/1017880/expand-div-to-max-width-when-floatleft-is-set](http://stackoverflow.com/questions/1017880/expand-div-to-max-width-when-floatleft-is-set) it should help you to understand. – Andrea Turri Jul 08 '12 at 13:29
  • Andrea - thanks for the link. I checked this out - but what I am trying to do is slightly different...In that example they have a margin-left of 100px. I need to float my right container because my left container has a dynamic width.. If I remove the float it won't move with a margin-left of 100px based on the object to it's left... it will just remain static 100px from the left of the screen. – Robbie Jul 08 '12 at 13:39
  • if you can, use a javascript solution, if you wish I can answer with a js solution for it. – Andrea Turri Jul 08 '12 at 13:45
  • [jsFiddle](http://jsfiddle.net/Eric/LL4rX/) – Eric Jul 08 '12 at 15:00
  • "_In javascript I'm setting the width of the project number div to be one eighth of the window width (this works fine)_" - why? Why not CSS? – Eric Jul 08 '12 at 15:01
  • Also, your HTML is invalid - too many ``s – Eric Jul 08 '12 at 15:02

2 Answers2

4

Does this do what you want?

All I did was change:

.projectHeadlineText{float: left; margin-left: 15%;}

to

.projectHeadlineText{overflow: hidden; }
Eric
  • 95,302
  • 53
  • 242
  • 374
  • it works but then it does not make sense. `overflow:hidden` suggests that any overflowing contents outside of the div will be hidden. But, ... in practice it is *not* hidden. I can still see it (in my case). And that's why it does not make sense. – Dennis Apr 19 '17 at 19:44
0

This works for me and hope work for you also.....

.projectHeadlineText{display:inline-block; margin-left: 15%;}
Bill the Lizard
  • 398,270
  • 210
  • 566
  • 880
Aasim
  • 1