CODEWITHSUNDEEP
htmlcsslayout
Alexandru
Alexandru

Reputation: 117

Two elements how to arrange them one after another

I have an html file(index.html) and a css file(style.css), there is the jsfiddle : http://jsfiddle.net/RZm5y/2/ .

index.html

<html>
<head>
<title>demo</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="nav">
        <div class="logo">artistLog</div>
    </div>
<div class="topbar">This is the top search/login bar</div>
<div class="content">
    <div class="card">
        <img class="cover" src="img/cover.png" />
    </div>
    <div class="card">Description</div>
</div>
</body>
</html>


style.css

html, body {
    background: #343434;
    margin:0px;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.nav {
    background: #565656;
    color: #b4b4b4;
    margin-right:0px;
    bottom: 0;
    left: 0;
    position: absolute;
    top: 0;
    border-right:7px solid #2b2b2b;
    width: 86px;
}
.nav .logo {
    background:#353535;
    height:60px;
    cursor:pointer;
    border-bottom:1px solid #353535;
}
.topbar {
    background: #1d1d1d;
    border-bottom: 1px solid #8d8d8d;
    height: 60px;
    left: 86px;
    position: absolute;
    right: 0;
    top: 0;
}
.content {
    bottom: 0;
    left: 120px;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 62px;
    padding: 50px 25px 25px 20px;
}
.content .card {
    background: #101010;
    color:#a4a4a4;
    width:250px;
    height:320px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-right:10px;
    margin-bottom: 15px;
}
.content .card .cover {
    max-width:250px;
    max-height:140px;
    background: transparent;
    float:left;
    -webkit-border-top-left-radius: 6px;
    -webkit-border-top-right-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

I want the cards inside the content to be showed one after another not one under another when the display is big enough to show minimum 2 cards one after another else show one under another.

Upvotes: 0

Views: 1866

Answers (1)

Hashem Qolami
Hashem Qolami

Reputation: 99564

You could achieve that simply by floating the cards to a side.

Example Here.

.content .card {
    background: #101010;
    color:#a4a4a4;
    width:250px;
    height:320px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    margin-right:10px;
    margin-bottom: 15px;
    float: left; /* <-- Added declaration */
}

Since you have added overflow: auto; to the .content element, the float is already cleared. However you might want to consider this topic:

Upvotes: 1

Related Questions