CSS issue with elements spanning columns_问答_开发者

CSS issue with elements spanning columns

开发者 https://www.devze.com 2022-12-29 00:46 出处：网络

Overview: I\'m trying to create a relatively simple page layout detailed below and running into problems no matter how I try to approach it.

相关专题：css css-float

Overview:

I'm trying to create a relatively simple page layout detailed below and running into problems no matter how I try to approach it.

Concept:

- A standard-size-block layout. I'll quote unit widths: each content block is 240px square with 5px of margin around it.

- A left column of fixed width of 1 unit (245px - 1 block + margin to left). No problems here.

- A right column of variable width to fill the remaining space. No problems here either.

- In the left column, a number of 1unit x 1unit blocks fixed down the column. Also some blank space at the top - again, not a problem.

- In the right column: a number of free-floating blocks of standard unit-sizes which float around and fill the space given to them by the browser window. No problems here.

- Lastly, a single element, 2 units wide, which sits half in the left column and half in the right column, and which the blocks in the right column still float around. Here be dragons.

See here for a diagram.

Problem:

No matter how I approach this, it goes wrong. Below is code for my existing attempt at a solution. My current problem is that the 1x1 blocks on the right do not respect the 2x1 block, and as a result half of the 2x1 block is overwritten by a 1x1 block in the right-hand column.

I'm aware that this is almost certainly an issue with position: absolute taking things out of flow. However, can't really find a way round that which doesn't just throw up another problem instead.

Code:

<html>
<head>
  <title>wat</title>
  <style type="text/css">
    body {
      background: #ccc;
      color: #000;
      padding: 0px 5px 5px 0px;
      margin: 0px;
    }

    #leftcol {
      width: 245px;
      margin-top: 490px;
      position: absolute;
    }

    #rightcol {
      left: 245px;
      position: absolute;
    }

    #bigblock {
      float: left;
      position: relative;
      margin-top: -240px;
      background: red;
    }

    .cblock {
      margin: 5px 0px 0px 5px;
      float: left;
      overflow: hidden;
      display: block;
      background: #fff;
    }
    .w1 {
      width: 240p开发者_JAVA百科x;
    }
    .w2 {
      width: 485px;
    }
    .l1 {
      height: 240px;
    }
</head>
<body>
  <div class="cblock w2 l1" id="bigblock">
    <h1>DRAGONS</h1>
    <p>Here be they</p>
  </div>
  <div id="leftcol">
    <div class="cblock w1 l1">
      <h1>Left 1</h1>
      <p>1x1 block</p>
    </div>
  </div>
  <div id="rightcol">
    <div class="cblock w1 l1">
      <h1>Right 1</h1>
      <p>1x1 block</p>
    </div>
    <div class="cblock w1 l1">
      <h1>Right 2</h1>
      <p>1x1 block</p>
    </div>
    <div class="cblock w1 l1">
      <h1>Right 3</h1>
      <p>1x1 block</p>
    </div>
    <div class="cblock w1 l1">
      <h1>Right 4</h1>
      <p>1x1 block</p>
    </div>
    <div class="cblock w1 l1">
      <h1>Right 5</h1>
      <p>1x1 block</p>
    </div>
    <div class="cblock w1 l1">
      <h1>Right 6</h1>
      <p>1x1 block</p>
    </div>
    <div class="cblock w1 l1">
      <h1>Right 7</h1>
      <p>1x1 block</p>
    </div>
  </div>
</body>
</html>

Constraints:

One final note that I need cross-browser compatibility, though I'm more than happy to enforce this with JS if necessary. That said, if a CSS-only solution exists, I'd be extremely happy.

On #bigblock:

Remove margin-top: -240px
Add margin-left: -240px

Then, place #bigblock in the right column such that it is the 5th DIV.

Note that this will only really work with a fixed width container. If you resize the browser you will see #bigblock move around.

Have you looked at any CSS frameworks like bluprint or 960 Grid System? They may help you achieve what you are looking for.

I had the same problem with column layout. I fixed it by using a margin-left: 40px; in CSS file. Additionally, do not use overflow: hidden; this hides the list-style circles. I hope this helps.