All geek questions in one place

CSS Column Layout

I am going to circles with CSS layout. I basically want:

<-------><-------------->
         <------><------>
  400px    50%      50%

Thus, its 3 columns, one fixed size and two others, occupying 50% of each remaining space. It seems that I can not do the second and third occupation of 50% of the remaining space.

Any help would be greatly appreciated, thank you very much :)

+3
source share
5 answers

I tried a couple of options. Below works in Chrome 2, Firefox 3.5 and IE8:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>NLR</title>
<style type="text/css">
html, body, div { margin: 0; border: 0 none; padding: 0; }
div { height: 500px; border-collapse: collapse; }
#wrapper { padding-left: 400px; }
#nav { width: 400px; margin-left: -400px; float: left; background: yellow; }
#main { overflow: hidden; background: blue; }
#left { float: left; width: 50%; background: red; height: 300px; }
#right { float: right; width: 50%; background: green; }
</style>
</head>
<body>
<div id="wrapper">
<div id="nav"></div>
<div id="main">
  <div id="left"></div>
  <div id="right"></div>
</div>
</div>
</body>
</html>
+5
source

markup:

<div id="left">some content</div>
<div id="main">
    <div>more content</div>
    <div>still more content</div>
</div>

css:

#left {
    float: left;
    width: 400px;
    margin-right: -405px; /* throwing in a little extra */
}

#main {
    margin-left: 405px; /* matching the margin of #left */
}

#main > div {
    width: 50%; /* may need to make it 49.9% for some browsers */
}
+2
source

, WRAP . :

+---------------BODY-----------------+
|<---DIV#1---><--------DIV#2-------->|
| <---DIV3--> | <--DIV4--><--DIV5--> |
| |         | | |        |         | |
| |         | | |        |         | |
| |         | | |        |         | |
| |         | | |        |         | |
| |         | | |__________________| |
| |_________| | |____CLEAR DIV_____| |
+-----------------------------------+
  • DIV0: main-wrapper
  • DIV1: -
  • DIV2: content-wrapper
  • DIV3: sidebar-content
  • DIV4: -
  • DIV5: content-right
  • CLEAR DIV: .
0

:

Packers are very important and much easier. To center things inside the wrappers, you can set the margin to the left / right of the div inside the wrappers to “auto”.

<div class="bigwrapper">
 <div class="400pxdiv">
  Content for 400pxdiv
 </div>
 <div class="rightwrapper">
  <div class="50percent1">
   50percent1 content
  </div>
  <div class="50percent2">
   50percent2 content
  </div>
 </div>
</div>
0
source

This works for me in Firefox.

<!DOCTYPE html>
<title>Test</title>
<style>
  #A { width: 400px; float:left; outline: thin solid pink; }
  #B { margin-left: 400px; overflow: hidden; outline: thin solid pink; }
  #B1, #B2 { width:50%; float:left; outline: thin solid pink; }
</style>
<div id=A>
  A
</div>
<div id=B>
  <div id=B1>
    B1
  </div>
  <div id=B2>
    B2
  </div>
</div>
-1
source

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

More articles:


All Articles