How to Make CSS3 Columns on a Horizontal Plane

Is it possible to make CSS3 columns on a horizontal plane?

Giving the paragraphs a width and floating left should work if you specify a min/max width to the paragraphs. It should work with a variable width wrapper element but may break if you don't allow the paragraphs to scale much with restricted widths.

p {
    float: left;
    max-width: 160px;
    min-width: 100px;
    margin: 20px;
}

div { //wrapper
    width: 480px;
}

jsFiddle

Don't forget to clear the float in the element after the columns.

How to create a horizontal column in HTML and CSS?

There are a few things to cover here:

• If you set the background-image property in CSS, you no longer need the <img> tag. Actually, this is the reason why your images are clustered together. You may remove all the <img> tags.
• In your CSS .col-3 the background-image property has a comma in the URL instead of a dot.
• The CSS .sub-hero needs to have font-size: 0; set in order to eliminate whitespace between inline-block elements (this is one way of handling this issue: Fighting the Space Between Inline Block Elements).

.sub-hero {
  width: 610px;
  margin: 0 auto;
  font-size: 0;
}
.col {
  display: inline-block;
  width: 25%;
  height: 200px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.col-1 {
  background-image: url("https://altcademy.github.io/apple_clone/images/watch_large.jpg");
}
.col-2 {
  background-image: url("https://altcademy.github.io/apple_clone/images/ipad_pro_large.jpg");
}
.col-3 {
  background-image: url("https://altcademy.github.io/apple_clone/images/accessories_large.jpg");
}
.col-4 {
  background-image: url("https://altcademy.github.io/apple_clone/images/macbook_large.jpg");
}

<div class="sub-hero">
  <div class="col col-1"></div>
  <div class="col col-2"></div>
  <div class="col col-3"></div>
  <div class="col col-4"></div>
</div>

how to style a ul horizontally with its elements in columns?

CSS3 column would achieve what you are looking for, fiddle and MDN link

ul {
  -webkit-column-count: 3;
  -webkit-column-gap: 20px;  
  -moz-column-count: 3;
  -moz-column-gap: 20px;
  column-count: 3;
  column-gap: 20px;
}

As you can see it still requires vendor prefixes but is supported by all major browsers can I use

Edit

To avoid breaking inside the <li> as @andrew commented on his answer about, add

li {
     -webkit-column-break-inside: avoid;
     -moz-column-break-inside: avoid;
     column-break-inside: avoid;
}

Updated fiddle

Trouble aligning DIVs on horizontal plane

On .productDetailsPanel, remove float: right and add overflow: hidden, job done; it's exactly what you asked for.

http://jsfiddle.net/thirtydot/KjZ8Q/

The reason overflow: hidden helps in this case is not obvious, read this.

Page with multiple columns, horizontal scrolling, no vertical scrolling

You can make use of flexbox layout. The columns will wrap after it reaches the maximum height using flex-flow: column wrap. Make sure you look into the browser support for flexbox.

JSfiddle Demo

.outer {  height: 500px;  overflow: auto;  background: #fc8;  /* Added CSS */  display: flex;   flex-flow: column wrap;}h1 {  font-size: 18px;  margin: 1px 0px 3px 0px;  color: #248;}p {  font-size: 13px;  margin: 2px 0px;}.box {  background: #def;  padding: 3px 6px;  border: 2px solid #369;  margin: 3px 6px;  vertical-align: top;  width: 250px;}

<div class='outer'>  <div class='box'>    <h1>The title 1</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 2</h1>    <p>      Some different text here...    </p>  </div>  <div class='box'>    <h1>The title 3</h1>    <p>      Some longer text here. Danish croissant. Powder halvah. Tootsie roll topping tiramisu jelly-o fruitcake cheesecake marzipan.    </p>  </div>  <div class='box'>    <h1>The title 4</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 5</h1>    <p>      Some text here. Chocolate cake gummi bears wafer apple pie. Bear claw gummies pie sugar plum jujubes. Liquorice croissant sugar plum danish macaroon.    </p>  </div>  <div class='box'>    <h1>The title 6</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 7</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 8</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 9</h1>    <p>      Some varied text here...    </p>  </div>  <div class='box'>    <h1>The title 10</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 11</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>  <div class='box'>    <h1>The title 12</h1>    <p>      Some text here...    </p>  </div>

</div>

How do I keep a horizontal column of divs in the same row when it is extends past the screen?

You can try table layout.

table-layout: fixed; makes all column equal width.

.outer{display: table;table-layout: fixed;width: 100%;}.outer div[class*="col"]{display: table-cell;padding: 20px;}.col1{ background: red;}.col2{ background: blue;}.col3{ background: yellow;}.col4{ background: green;}

<div class="outer"><div class="col1">    column1 </div><div class="col2">    column2</div><div class="col3">    column3 </div><div class="col4">    column4 </div></div>

Horizontal line overlapping into two columns

Working solution:

<div class="row">
    <div class="col-1 col-md-6">
         <h3>heading</h3>
    </div>
  <span class="line"><span></span></span>
    <div class="col-2 col-md-6">
         <p>Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. </p>
    </div>
</div>

.col-1, .col-2 {
  padding: 40px;
  border: 1px solid #000;
}
.row {
  width: 100%;
  margin: 40px;
  display: flex;
}
p {
  border: 1px solid #000;
  padding: 10px;
}
h3 {
  padding: 0;
  margin: 0;
}

.line {
  position: relative;
}

.line span {
  position: absolute;
  background: red;
  display: inline-block;
  height: 1px;
  /* padding + border */
  top: 41px;
  right: -50px;
  width: 500px;
}
.line span:before {
  content: '';
  position: absolute;
  width: 11px;
  height: 11px;
  border: 1px solid red;
  border-radius: 11px;
  top: -5px;
  left: -10px;
}

How to make a div fill a remaining horizontal space?

This seems to accomplish what you're going for.

#left {  float:left;  width:180px;  background-color:#ff0000;}#right {  width: 100%;  background-color:#00FF00;}

<div>  <div id="left">    left  </div>  <div id="right">    right  </div></div>

---

Related Topics