5

I want to realize some mobile layout with two divs or buttons that fill the whole page 50% to 50% (EDIT: underneath each other). Now when I do it with this code

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
}

section {
    height: 50%;
}

section>div {
    height: 100%;
    border: 1px solid black;
    margin: 10px;
}
<section>
    <div>text1</div>
</section>
<section>
    <div>text2</div>
</section>

the page is way too high.. Hardly surprising as the 10px margin and the 1px border enlarge the div... Also a wrapper div with a padding of 10px won't solve the problem.

How could I realize this layout where the page is not scrolling (not overflowing) but 100% heigh, with two buttons filling out the complete page (each at 50% or 70% - 30% or so) while the button itself has a margin or padding to get a small space to the page border and a e.g. 1px solid border?

Thank you in advance

^x3ro

3 Answers 3

6

To make it even more simple, couldn't you just use CSS box-sizing - which would be supported in most mobile browsers...(I included vendor prefixes for the example).

See example here

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

section {
    height: 50%;
    width: 100%;
    padding: 10px;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
}

section div {
    height: 100%;
    background-color: #333;
    border: 1px solid orange;
    color: white;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
}

The box sizing property ensures that the height and width of an element aren't affected by borders, padding, or margins.

1
  • That seems to be the best solution, thanks. But keep in mind, that you need to set html and body height to 100%! Otherwise the sections won't be 100% ;) And also remember to remove body padding / margin. ^x3ro
    – x3ro
    Feb 7, 2012 at 17:09
1

I would read this article on design for mobile devices if that's what you're designing for (there are more links at the bottom of the page you should follow).

And for your layout, do you mean something like this? I would recommend using absolute positioning when making designs like this. It makes everything much easier and it doesn't need flow layout anyway.

4
  • Thank you! Not eyactly what I wanted but I now figured out how to do this. I'll post it in an answer to my question.
    – x3ro
    Feb 3, 2012 at 15:54
  • 1
    You didn't specify in your question which direction the buttons should be stacked. The proper action would be to notify me of the error so I could edit my answer (as I have now done) and mark it as correct.
    – Hubro
    Feb 3, 2012 at 16:07
  • I'm sorry for that. I'm new here... Could you explain how to notify you? :)
    – x3ro
    Feb 7, 2012 at 17:19
  • If you comment on an answer, the author of that answer will be notified. I'm also pretty sure people are notified if you type @<username>, for instance @x3ro: Hello!
    – Hubro
    Feb 8, 2012 at 1:31
0

This is the solution i've been looking for: http://jsfiddle.net/WWcfm/10/

Thanks to Codemonkey's code example, placing two boxes right beside each other, I figured out how to set them underneeth each other.

Thank you!

#EDIT: Attention!

You'll need to use normalize.css. Otherwise it would look way different on your site!

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.