CODEWITHSUNDEEP
htmlcss
Laurens
Laurens

Reputation: 13

How to line 3 div's in a div

I'm working on a webpage to get cover photos from eBooks next to each other. Under each photo there are two buttons. see picture. I used one div as a container, then I used <li> because I will have a lot more books. This page is on a fluid website.

<div id="ebooks_container">

<li> 
  <div id="ebook_single"><img src="cover1.jpg">
  <div id="download_btn">         
  <a href="eBooks_ENG/eBook1.epub">DOWNLOAD</a>
</div>
    <div id="review_btn"><a class="inline" href="#data2">REVIEW</a>
</div>
</div>
</li>

I can't get the buttons under the image and when I copy this code and paste it under this the next eBook single div shows up under the first. I want them next to each other.

Hope someone can help me. I know a little bit of CSS3 but I'm an amateur :)

This is what I am trying to do:

enter image description here

Upvotes: 1

Views: 84

Answers (4)

Matt Greenberg
Matt Greenberg

Reputation: 2330

It looks like you are just starting out. I would try to find an online video resource to help you learn like lynda or treehouse. (am i allowed to plug these website names? I am not sponsored by either).

I have a rough layout of what you are looking for. This might help.

UPDATE: The reason this code is effecting your current code is because these styles are being applied to ALL of your 'UL', 'LI' tags. You need to make this 'UL' unique by adding a class to it. I update the code to show you want I mean.

HTML

<ul class="book_covers clearfix">

    <li>
        <div>Image Panel</div>
        <a class="btn1" href="#">Button1</a>
        <a class="btn2" href="#">Button2</a>
    </li>
    <li>
        <div>Image Panel</div>
        <a class="btn1" href="#">Button 1</a>
        <a class="btn2" href="#">Button2</a>
    </li>

</ul>

CSS

*{
    box-sizing: border-box;
}
.clearfix:after {
   content: " ";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}
.book_covers { 
    list-style-type: none;
    width: 100%;
    height: 500px;
    background: #333;
    padding: 0px;
    margin: 0px;
}
.book_covers li {
    width: 50%;
    height: 100%;
    background: yellow;
    display:inline-block;
    float:left;
    border: 2px solid #000;
}
.book_covers li div{
    width: 90%;
    height: 70%;
    padding:0px;
    margin: 5%;
    background: blue;
    border:2px solid #000;

}
.book_covers li .btn1,
ul li .btn2{
    width: 42.5%;
    height: 22.5%;
    padding: 0;
    float: left;
    border:2px solid #000;
    text-decoration: none;
    color: #fff;
    text-align: center;
}
.book_covers li .btn1{
    margin:0 2.5% 5% 5%;
    background: orange;
}
.book_covers li .btn2{
    margin:0 5% 5% 2.5%;
    background: pink;
}

Here is the updated fiddle!

Upvotes: 1

Laurens
Laurens

Reputation: 13

@magnetwd Thanks for looking into my problem. I uploaded a duplicate site, this is the page [link] (http://hoddenbagh.nl/test_bibleopen/subjects_eBooks.html) The NAV bar is not good anymore. And the shadow Gif under the photo neither. Probably that all has to do with the new CSS.

To compare, this is the original site. NAV bar and photo shadow are good. [link] (http://hoddenbagh.nl/bibleopen/index.html)

P.S. I didn't do much on styling yet and the buttons are still basic.

Upvotes: 0

Jah
Jah

Reputation: 1006

not tested but should work

<style>
ul{
   list-style-type: none;
}
ul li{
    border:5px solid #ccc;
    background:#ccc;
    width:260px;
    height:400px;
    margin-right:4px;
    float:left;
}
li div{
  width: 100%;
  height:90%;
  background:#dedede;
}
li span{
  display: inline-block;
  width: 40%;
  height: 5%;
  background:#fff;
  padding:8px;
    border:5px solid #ccc;
    float:left;
}
</style>

<ul>
    <li>
        <div>image</div>
        <span>Download</span>
        <span>Review</span>
    </li>
    <li>
        <div>image</div>
        <span>Download</span>
        <span>Review</span>
    </li>
</ul>

Upvotes: 0

StackSlave
StackSlave

Reputation: 10627

Your code might look something like:

HTML

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta http-equiv='content-type' content='text/html;charset=utf-8' />
    <style type='text/javascript'>
      @import main.css;
    </style>
  </head>
<body>
  <div id='cnt1'>
    <img id='img1' src='cover1.jpg' />
    <a href='eBooks_ENG/eBook1.epub' class='btns' id='dwn'>DOWNLOAD</a>
    <a href='#data2' class='btns' id='rev'>REVIEW</a>
  </div>
  <div name='data2' id='data2'>Your data here</div>
</body>
</html>

main.css may look something like:

#cnt1{
  height:320px; width:300px; position:relative;
}
#img1{
  display:block; height:300px; width:300px;
}
.btns{
   display:block; height:20px; width:150px; text-align:center; float:left;
}

Upvotes: 0

Related Questions