All geek questions in one place

2 <div> s in <div>

The best way to center 2 divs is an inner div. Like this

  1 2 3 4 5 6 7 8 9 10 11 12 
1 ---------------------------
2 -       main div          -
3 -    ------      ------   -
4 -    -div1-      -div2-   -
5 -    ------      ------   -
6 -                         -
7 ---------------------------

Fixed width and height of the main div.

thank

+3
source share
4 answers

How about this? The only fixed thing you need to set is the margins of the inner div, but that shouldn't hurt since you didn't talk about any marginal restrictions in the comments on this topic. As for styles, only borders are purely presentation, the rest are the minimum required styles.

<!doctype html>
<html lang="en">
    <head>
        <title>SO question 1892901</title>
        <style>
            #main {
                position: relative;
                width: 500px;
                height: 300px;
                border: 1px solid black;
            }
            .inner {
                position: absolute;
                top: 0;
                bottom: 0;
                margin: 20px;
                border: 1px solid black;
            }
            .inner.left {
                left: 0;
                right: 50%;
            }
            .inner.right {
                right: 0;
                left: 50%;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="inner left">inner left</div>
            <div class="inner right">inner right</div>
        </div>
    </body>
</html>

I have to add, strict doctype is very important , otherwise IE will not work due to an error .

+1
source

css : ; : ; left: px; top: px;

0

  <div style="width:100px;">
      <div style="float:right;width:50px;">I m div 1</div>
      <div style="float:left;width:50px;">I m div 2</div>
  </div>
-3

:

<table>
<tr>
<td>Div 1 content here</td><td>Div 2 content here</td>
</tr>
</table>

tds , , , .

: , , "". , . . , , css, . , div - - .

2: , :

<html>
<head>
</head>
<body>

<style>
  div { width: 100px; height: 30px; border: 1px solid red; margin: 0 auto 0 auto; text-   align: center; }
  table { border: 1px solid blue; width: 400px; }
  td { padding: 20px 0 20px; }
</style>

<table>
<tr>
  <td> <div class="one">div 1</div> </td>
  <td> <div class="one">div 2</div> </td>
</tr>
</table>

</body>
</html>

. divs, .

-4

Source: https://habr.com/ru/post/1725467/

More articles:


All Articles