CODEWITHSUNDEEP
htmlcss
Denys Wessels
Denys Wessels

Reputation: 17039

Display unordered list and image next to each other

I'm creating a website and would like to make use of responsive design.All i want to do is display an unordered list of items and an image to the right(next to) of the <ul> and when the user resizes the page or views it on a mobile device the image should appear below the <ul>.

I've tried altering the display style of my divs which house the <ul> and the image but it's still not working:

<div style="display:table">
  <div style="display:table-cell; vertical-align:top;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div style="display:table-cell;float:right;">
    <img src="Images/Image1.jpg" />
  </div>
</div>

Upvotes: 1

Views: 22936

Answers (4)

anurag
anurag

Reputation: 2246

Use float:left on both list and image, to align the image next to the list.

As shown by the following snippet.

.container {
  padding-left: 15px;
  padding-right: 15px;
}
.row {
  margin-left: -15px;
  margin-right: -15px;
  clear: both;
  box-sizing: border-box;
}
.col-lg-8,
.col-lg-4 {
  float: left;
  padding: 0 15px;
}
@media screen and (min-width: 760px) {
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
}
@media screen and (max-width: 760px) {
  .col-lg-8 {
    width: 100%;
  }
  .col-lg-4 {
    width: 100%;
  }
}
<div class="container">
  <div class="row">
    <div class="col-lg-8">
      <ul class="list-holder">
        <li>Joey</li>
        <li>Chandler</li>
        <li>Ross</li>
      </ul>
    </div>
    <div class="col-lg-4">
      <div class="image-holder">
        <img src="http://stuffpoint.com/images/stuff-icon/friends.jpg" class="img-responsive">
      </div>
    </div>
  </div>
</div>

REMARKS Directly import bootstrap, for Responsive Web Page.

Upvotes: 1

Berat Cevik
Berat Cevik

Reputation: 1958

Use the following code:

for HTML:

 <div style="display:table">
  <div class="design" style="display:table-cell; vertical-align:top;">
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div classstyle="display:table-cell;float:right;">
    <img src="Images/Image1.jpg" />
  </div>
</div>

for CSS:

.design{
float: left;
}

and get rid of the 

float: right;

Upvotes: 1

Dionys
Dionys

Reputation: 3113

Add float type to both ul and img. Then add minimum length to you ul, the maximum width you want the image to be under the ul.

    <ul style="float: left; min-width: 500px; border-right: solid 1px;">
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
    <img src="Images/Image1.jpg" style="float: left;" />

Upvotes: 1

Aaron
Aaron

Reputation: 10430

You could use flexbox to align the items, then use a media query to change the display property for smaller screens (change the 320px to any width for the breakpoint).

.flexcontainer {
  display: flex;
  align-items: center;
}
@media (max-width: 320px) {
  .flexcontainer {
    display: block;
  }
}
<div class="flexcontainer">
  <div>
    <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>
  </div>
  <div>
    <img src="http://lorempixel.com/image_output/nature-q-c-120-120-1.jpg" />
  </div>
</div>

Upvotes: 2

Related Questions