0

I have problem with content of my webpage. I need on same line 3 div where 1st is floated left with static width, 3rd is floated left/right (I have no problem with left or right) with static width and 2nd div must have width as space between 1st and 3rd element.

For example:
- window has width 1920px , 1st div has width 200px and float left, 3rd div has width 200px and flaoted left => 2nd div has width 1520px
Next example:
- window has width 1000px , 1st div has width 200px and float left, 3rd div has width 200px and flaoted left => 2nd div has width 600px => different widths of window makes different width of div2 and I need solved this problem on every width of screen.

I try 2nd div as "display: block; margin-left: -200px; margin-right: -200px;", but this not work. This solution work only if I have only 1st nd 2nd div.

Percentages is not solution because 1% on width 1000px is different number as 1% on 500px etc..

I can solved this with Javascript, but I search for CSS solution becasuse if I used resize then i must call JS still and it is ugly. Is it possible?

Severe Torture
  • 319
  • 5
  • 26

2 Answers2

1

Yes, that can be easily accomplished using media queries. This is roughly how it would work with your two examples:

window has width 1920px , 1st div has width 200px and float left, 3rd div has width 200px and flaoted left => 2nd div has width 1520px

@media (max-width: 1920px) {
  .div1 {
    width: 200px;
    float: left;
  }
  .div2 {
    width: 1520px;
  }
  .div3 {
    width: 200px;
    float: left;
  }
}

window has width 1000px , 1st div has width 200px and float left, 3rd div has width 200px and flaoted left => 2nd div has width 600px

@media (max-width: 1000px) {
  .div1 {
    width: 200px;
    float: left;
  }
  .div2 {
    width: 600px;
  }
  .div3 {
    width: 200px;
    float: left;
  }
}

This are just examples. Now, the idea is to have a "global" set of rules, like the common rules for each class/id/element (for example, div1 and div3 in your case are always floated left), and then use media queries just to write exceptions to those rules. So, here is how the examples from above would look like following that practice: 

.div1 {
  width: 200px;
  float: left;
}

.div3 {
  width: 200px;
  float: left;
}

@media (max-width: 1920px) {      
  .div2 {
    width: 1520px;
  }
}

@media (max-width: 1000px) {
  .div2 {
    width: 600px;
  }
}

As you see, there's no need to write separate media query rules for div1 and div3 since their rules remain the same in this example. Hope it makes sense.

UPDATE

if I open it in widow with 900px or 901px or 888px or 910px or 1280px etc.. => 1520px solved only full screen reoslution but in another resolution 1520px is so big

.div2 {
    width: 600px;
}

@media (min-width: 1920px) {
  .div2 {
    width: 1520px;
  }
}

This should work. Defaults the div2 width to 600px, but if the window is 1920px or wider, div2 becomes 1520px wide.

Shomz
  • 37,421
  • 4
  • 57
  • 85
  • I look forward to it sounds good. – Severe Torture Dec 08 '14 at 14:45
  • And how this work when I open this site on window width 1280px? This still add div2 tu 1520px => This is not working? – Severe Torture Dec 08 '14 at 14:48
  • Yes, everything from 1000px to 1920px will make div2 to be 1520px wide. Note that there are many expressions you can use instead of `max-width` - if you use `min-width` instead, then your div2 will grow to 1520px only when the window width is 1920px or more. – Shomz Dec 08 '14 at 14:52
  • Ok I know media query, but I search solution which work if I open it in widow with 900px or 901px or 888px or 910px or 1280px etc.. => 1520px solved only full screen reoslution but in another resolution 1520px is so big. I mean this is not solution for me. – Severe Torture Dec 08 '14 at 14:56
  • I just gave you an example. Tell me your exact "breaking" widths and I'll help you write a full query. – Shomz Dec 08 '14 at 14:57
  • I have no breaking widths I search for solution which work everytime on different width of window. In Javascript I can solved this when I get width of screen, div1 and div3 after that screen-div1-div3 and this variable I can add to width of div2, but I mean there is solution without JS. – Severe Torture Dec 08 '14 at 15:07
  • Have you considered using percentages for widths? My solutions above will work for every width (not only those listed in media queries), but for smooth scaling, you need to use percentages. You can also combine them with media queries. – Shomz Dec 08 '14 at 15:16
  • How? 1% of width 1000px is 10px and 1% from width 400px is 4px => if I need 200px (for example) then I on 1000px add 20% but on 400px I add 50%... This is not solution I now percentages. – Severe Torture Dec 09 '14 at 06:26
  • Well, you need to decide what you want. So far I've shown you how **everything** you asked for works... – Shomz Dec 09 '14 at 12:44
  • I still say same thing what I want. I an searching for CSS solution which can work on random widths of content (browser window). For that I still say media queries are good but there i need hundreds of queries and this is bad. Percentages not works because 2 from 3 divs have static width (for example 200px) and percentages and pixels on same line not work. I don't say if this question have solution. Now I found own solution which work in my site, but isn't useful in every page with similar problem. But i can't make answer ot my question and close this topic. – Severe Torture Dec 10 '14 at 13:33
  • Nobody understands what you want... As I said, you can combine media queries with percentages, so on small screens, you can have div2 200px, then on middle screens you can have div2 20% wide, and on the big screens 1500px... And you still need only 2 media queries for that. – Shomz Dec 10 '14 at 15:10
0

You can use percent instead of pxs.Something like this:

.div1{
float:left;
width:12%;
height: 200px;
background: blue;
}

.div2{
width:70%;
float:left;
height: 200px;
margin:0 3%;
background: blue;
}

.div3{
width:12%;
float:left;
height: 200px;
background: blue;
}
<div style="width:600px">
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</div>

If this won't work for you, you can look here .Hope this works for you

Community
  • 1
  • 1
Marian Ioan
  • 315
  • 1
  • 2
  • 14
  • I don't know your 600px this 600px can be 901px or 900px or something else. => 1% of width 1000px is 10px and 1% from width 400px is 4px => if I need 200px (for example) then I on 1000px add 20% but on 400px I add 50%... This is not solution – Severe Torture Dec 09 '14 at 06:28