Need Help in HTML CSS

Question

I want to create a page as shown in this picture, but it is not displaying the same.

#addcontainer {
  width: 100%;
}
#addprimary {
  float: left;
  max-width: 125px;
}
#addsecondary {
  float: right;
  width: 125px;
}
#addcontent {
  margin: auto;
  width: 740px;
  height: 390px;
  background: url(../img/home_page/home.jpg);
}

<div id="addcontainer">
  <div id="addprimary">
    <ul>
      <li>
        <a href="#home">
          <img src="https://www.seoclerk.com/pics/183798-18HhJR1392119968.jpg">>
        </a>
      </li>
    </ul>
  </div>
  <div id="addcontent">
  </div>

  <div id="addsecondary">
    <ul>
      <li>
        <a href="#home">
          <img src="https://www.seoclerk.com/pics/183798-18HhJR1392119968.jpg">
        </a>
      </li>
    </ul>
  </div>
</div>

Mukul Kant · Accepted Answer · 2015-10-01 05:13:09Z

You should use like this -

img{
  max-width: 100%;
}
ul{
  margin:0;
  padding:0;
}
li{
  list-style:none;
}

#addcontainer {
  width: 100%;
}
#addprimary {
  float: left;
  max-width: 125px;
  
}
#addsecondary {
  float: right;
  width: 125px;
}
#addcontent {
  margin: auto;
  float: left;
  /*width: 740px;*/
  width: calc(100% - 250px);
  height: 390px;
  background: url(http://img.reflex.cz/img/3/full/2394140-img-windows.jpg) no-repeat center center;
  background-size:  740px 390px; 
}

<div id="addcontainer">
  <div id="addprimary">
    <ul>
      <li>
        <a href="#home">
          <img src="https://www.seoclerk.com/pics/183798-18HhJR1392119968.jpg">
        </a>
      </li>
    </ul>
  </div>
  <div id="addcontent">
  </div>

  <div id="addsecondary">
    <ul>
      <li>
        <a href="#home">
          <img src="https://www.seoclerk.com/pics/183798-18HhJR1392119968.jpg">
        </a>
      </li>
    </ul>
  </div>
</div>

Piotr Sikora · Accepted Answer · 2015-10-01 09:22:36Z

1

I Think you should use boostrap , if you need custom class then you can just re-work any bootstrap class you want.

In bootstrap it will look like this :

<div class="col-md-12">  
  <div class="col-md-2">
  left side
  </div>
  <div class="col-md-8">
  middle
  </div>
  <div class="col-md-2">
  right side
  </div>
</div>

answered Oct 1, 2015 at 9:22

Piotr Sikora

1559 bronze badges

Comments

Batman · Accepted Answer · 2015-10-01 06:42:55Z

0

css :

img{
  max-width: 100%;
}
ul{
  margin:0;
  padding:0;
}
li{
  list-style:none;
}

#addcontainer {
  width: 100%;
}
#addprimary,#addsecondary  {
width:18%;
    display:inline-block;
    vertical-align:top;

}

#addcontent {
    margin:0 20px;
 display:inline-block;

  width: 55%;
  height: 390px;
  background: url(http://www.personal.psu.edu/afr3/blogs/siowfa13/Tigers-animals-20238015-2493-1983.jpg) no-repeat;
  background-size:  100% 100%; 
}

http://jsfiddle.net/souraj/t2rx7n0c/

you can use display:inline-block to display the elements.

answered Oct 1, 2015 at 6:42

Batman

4802 silver badges8 bronze badges

Collectives™ on Stack Overflow

Need Help in HTML CSS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related