css- 2 boxes, one=200px, second=(100%-200px)- how?

Guest · Oct 4, 2005

Hello,
How can I manage to make 2 boxes in CSS-

one with width=200px and second's width=(100%-200px). Such thing can be
easily done using frames and tables, so it must be possible using CSS too!
Why do I need it? Because I have a page with menu on the left (it's the
first box) and a box with text on the right (it should have width=100%-200px
to look good).

Regards,
Talthen

Neredbojias · Oct 5, 2005

With neither quill nor qualm, (e-mail address removed) quothed:

Hello,
How can I manage to make 2 boxes in CSS-

one with width=200px and second's width=(100%-200px). Such thing can be
easily done using frames and tables, so it must be possible using CSS too!
Why do I need it? Because I have a page with menu on the left (it's the
first box) and a box with text on the right (it should have width=100%-200px
to look good).

Have an outer div with padding-left:200px; and absolutely-position the
200 px inner div margin-left:-200px; inside it.

Steve Pugh · Oct 5, 2005

How can I manage to make 2 boxes in CSS-
one with width=200px and second's width=(100%-200px). Such thing can be
easily done using frames and tables, so it must be possible using CSS too!
Why do I need it? Because I have a page with menu on the left (it's the
first box) and a box with text on the right (it should have width=100%-200px
to look good).

Amongst other methods:

..box1 { float: left; width: 200px;}
..box2 { margin-left: 200px;}

Steve

Guest · Oct 5, 2005

Neredbojias said:
Have an outer div with padding-left:200px; and absolutely-position the
200 px inner div margin-left:-200px; inside it.

Well... it still doesn't work as desired:

=====
<html>
<head>
<style>
div.menu {position: absolute; margin-left: -170px; top: 0px; width: 130px;
font-size: 13px;
text-align: left; height: 100%;}
div.text {top: 0px; left: 0px; padding-left: 170px; height: 100%;
background-color: red; width: 100%;
float: left;}
</style>
</head>
<body>
<div class="text">
slowo
<div class="menu">
menu
</div>
</div>
</body>
</html>
===

I have validated it with http://jigsaw.w3.org/css-validator/ and it shows
that my code is correct.
However only MSIE and Opera shows it correctly, and Mozillas suck ;/
A tried many combinations of paddings and margins and I am a bit bored.
How can I make it work in Mozillas?

Regards,
Talthen

Guest · Oct 5, 2005

I dit smth with margin: Xpx Ypx Zpx Vpx; width: auto and now it works.
Thanks to google.
The problem with the previous soslution was, that (margins and paddings and
borders)'s width is added to the width of the element. So, when I do:
width: 100%; margin-left: 100px; then I have 100%+100pixels of total width.

Regards,
Talthen

Neredbojias · Oct 5, 2005

With neither quill nor qualm, (e-mail address removed) quothed:

I dit smth with margin: Xpx Ypx Zpx Vpx; width: auto and now it works.
Thanks to google.
The problem with the previous soslution was, that (margins and paddings and
borders)'s width is added to the width of the element. So, when I do:
width: 100%; margin-left: 100px; then I have 100%+100pixels of total width.

That is correct according to the standard. I generally don't set
percentage widths when using padding or margins in such a fashion unless
the latter are on an inner div.

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Trouble with css	4	Mar 20, 2020
Help with my responsive home page	2	Dec 14, 2022
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022
Stuck with html and css	25	Dec 14, 2022
Assistance with adding a second player to my Pygame :(	0	Oct 8, 2020
Need help with code on website (noob)	2	Jul 18, 2022
How to create 2 sections side by side in header section?	0	Feb 7, 2020

css- 2 boxes, one=200px, second=(100%-200px)- how?

Guest

Neredbojias

Steve Pugh

Guest

Guest

Neredbojias

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads