CODEWITHSUNDEEP
csslistword-wrap
Carlos Serrano
Carlos Serrano

Reputation: 21

Keeping lists from wrapping around image

I'm trying to keep a couple of lists aligned to the left with some text and un-wrapping around an image on desktop/tablet and mobile but don't seem to be making a lot of progress.

Here's the Codepen: http://codepen.io/carlos_serrano/pen/ikjeg

and here the code for what I have so far:

HTML:

<div class="content">
<img src="any 100x 100 image.gif">
<h3>Heading</h3>
<p>Just random text here.</p>
</div>

<div class="linkcontainer">
<div class="linkleft">
    <ul>
        <li><a href="#unique-identifier1">Left Item 1</a></li>
        <li><a href="#unique-identifier2">Left Item 2</a></li>
        <li><a href="#unique-identifier3">Left Item 3</a></li>
      </ul>
</div>
<div class="linkright">
    <ul>
        <li><a href="#unique-identifier1">Right Item 1</a></li>
        <li><a href="#unique-identifier2">Right Item 2</a></li>
        <li><a href="#unique-identifier3">Right Item 3</a></ul>
</div>

Here's the CSS:

p{
overflow: hidden;
}

img{
float:left;
margin: 0 25px;
}

.linkcontainer {
width: 50%;
padding-bottom: 25px;
clear: both;
}

.linkleft, .linkright {
width: 100%;
float: right;
}

@media only screen and (min-width: 481px) {
    .linkleft, .linkright {
     display: inline-block;
     width: 30%;
     float: left;
    }
}

Upvotes: 1

Views: 330

Answers (1)

benomatis
benomatis

Reputation: 5633

Ok, if I understood your question (and clarification in your comment) correctly, this is what you need to do:

First, move the heading and the text into the linkcontainer:

<div class="content">
    <img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif" />
</div>

<div class="linkcontainer">
    <h3>Heading</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt architecto quasi quaerat cupiditate quis harum ipsum ipsa veritatis suscipit iure velit asperiores ipsam vitae reiciendis quos aliquam doloribus repellendus.</p>
    <div class="linkleft">
        <!-- ... -->
    </div>
</div>

Then ensure content and linkcontainer are both floated left:

.content {
    float:left;
    margin:0 25px
}

.linkcontainer {
    float:left;
    padding-bottom: 25px;
}

I updated your pen: http://codepen.io/anon/pen/aAiqj

EDIT: Upon further clarification, there is a better solution that will help prevent wrapping the heading, text and menus on smaller screens: make sure you wrap the 2 main divs into a wrapper div and set the width of this one to the total of the inner divs (plus margins).

#wrapper {
  width: 750px
}
.content {
  float: left;
  margin: 0 25px;
  width: 200px;
}
.linkcontainer {
  float: left;
  padding-bottom: 25px;
  width: 500px;
}

<div id="wrapper">
  <div class="content">
    <img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif">
  </div>

  <div class="linkcontainer">
      <!-- ... -->
  </div>
</div>

Here is your newest pen: http://codepen.io/anon/pen/hJbmr

Upvotes: 1

Related Questions