CODEWITHSUNDEEP
htmlcss
Yorrd
Yorrd

Reputation: 726

Is there a way to have a "Line Break" between divs?

So I have a menu, 4 menu points and I want to put them in a square 2x2. Is there a way to do that WITHOUT having a class for the first two and one for the other ones?

Thanks for any help :)

UPDATE: I did mess around a little more and I'm using the flex box structure, I'm sorry for not posting this information:

  ul {
  -webkit-box-orient: horizontal;
  }

  ul li {
    -webkit-box-flex: 1;
    height: 44%;
    margin: 3%;
  }

Upvotes: 1

Views: 4010

Answers (2)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201588

There is a line break between div elements by default. You are apparently using some CSS to override that. You need to modify the CSS code accordingly, or select a different approach.

The simplest way, assuming ”menu points” are links, is to use

<div><a ...>link1</a> <a ...>link2</a></div>
<div><a ...>link3</a> <a ...>link4</a></div>

But if you are using some elaborated markup and wish to create the break in CSS alone, then you may need some elaborated selectors like :nth-child(3).

Upvotes: 1

Jon Newmuis
Jon Newmuis

Reputation: 26502

Sure. For one, you can use floating and set the widths accordingly. See the example below, or http://jsfiddle.net/BUPX7/ for a live example.

HTML

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
</ul>

CSS

ul {
    width: 200px;
}

ul li {
    width: 100px;   
    margin: 0;
    padding: 0;   
    float: left;
}

Upvotes: 2

Related Questions