-2

I'm creating a website and in it's creation I'm creating different columns that should:

float: left;

If i where to view the site in a smaller resolution or reducing the browser windows size it causes the div cells to collapse under each other like boxes one on top of the other.

I'm not trying to promote a site, but this is the site i'm working on as a project for now that has the problem: Link to the website.

I tried removing any percentage values for sizing by giving every thing a specific value like 500px in width or height.

Any links or suggestion to keep every thing in place would be the greatest thing in the world.

leoMestizo
  • 1,469
  • 9
  • 15
Warlo
  • 39
  • 1
  • 6
  • 1
    What do you want to happen instead? – SLaks Jun 21 '13 at 19:30
  • 1
    Post your code instead of a URL. – Bill the Lizard Jun 21 '13 at 19:31
  • You could set a `min-width` for your `div.maincontainer`. This will cause horizontal scrolling instead of wrapping the elements to new lines. However, there are other issues with your current code. If you can create an example fiddle, it will be easier for us to play with it. – showdev Jun 21 '13 at 19:33
  • So you don't want the site mobile friendly? ie responsive? – Nick R Jun 21 '13 at 19:44
  • I believe showdev had the right idea on what i was thinking. I want to happen is to have the 2 DIV containers to stay side by side regardless of the viewer size. As for Mobile friendly i figure it might be possible to do a redirect to a different page (or mobile friendly page) with a different layout perhaps. I am new to making websites which is why i'm trying to ask questions and learn so forgive me for any misunderstandings. – Warlo Jun 21 '13 at 20:04
  • @user2510175 Look up `responsive design` and `css media queries`, it is no longer practical to build a completely separate site for mobile devices, but rather use `media-queries` to adjust the size of elements based on the device size. – Nick R Jun 21 '13 at 20:17

1 Answers1

1

Try something like this:

<div style="display:table">
<div style="display:table-row">
<div style="display:table-cell; width:50%"></div>
<div style="display:table-cell; width:50%"></div>
</div>
</div>

The table-row isn't really required in this case but it is better to have.

Johnny Guillen
  • 116
  • 2