Solved

Text wrapping independently around 4 different divs containing images.....

Posted on 2014-02-01
11
304 Views
Last Modified: 2014-02-02
I have a page that will have (among other things) a container div that contains a group of 4 images (floating left), with text that can wrap around the images.

I have 4 images, and I am pretty sure I want each image and wrapping text in its own div, because I don't want the text associated with one image to continue wrapping around the next image.

Twitter-Bootstrap responsive.

In  other words, I want each image and associated text to be in its own independent world.

Attached is a mockup of what I want it to look like, with one container div wrapping around the whole thing.

I think my ugly mockup pretty much explains what I want to do.

And I am looking to your expert suggestions on the best way to do this.

Thanks

Rowby
MockupThe red "dash" around the outside is not supposed to be a graphic. It's just supposed to be a div -- but my graphic editing program made it look like a graphic.
0
Comment
Question by:Rowby Goren
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 39827013
img_float_left{
   float:left;
   margin-right:5px;
   margin-bottom:5px;
}

Open in new window

<div class="container">

  <div class="row">
       <div class="col-xs-12"><img src="myimage" class="img_float_left">text text text</div>
    </div>
<div class="row">
       <div class="col-xs-12"><img src="myimage" class="img_float_left">text text text</div>
    </div>
<div class="row">
       <div class="col-xs-12"><img src="myimage" class="img_float_left">text text text</div>
    </div>
<div class="row">
       <div class="col-xs-12"><img src="myimage" class="img_float_left">text text text</div>
    </div>
<div class="row">
       <div class="col-xs-12"><img src="myimage" class="img_float_left">text text text</div>
    </div>
</div>

Open in new window

0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39827021
This is how that could look http://jsbin.com/UpiMIjoC/2/edit?html,output

The css above needs to be fixed by adding a dot before the class name.
.img_float_left{
   float:left;
   margin-right:5px;
   margin-bottom:5px;
}

Open in new window

0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39827035
Thanks!  Is the <div class="col-xs-12">  related to it being twitter bootstrap?
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39827126
Yes >  http://getbootstrap.com/css/#grid

There are 12 columns in the grid.  It is meant to make designing a responsive site easier.  However, making a responsive site takes more planning.  The code below will create 2 rows of "stuff" on a phone, and 2 equal columns side by side for screens larger than I think 768px.

<div class="row">
<div class="col-xs-12 col-sm-6">stuff</div>
<div class="col-xs-12 col-sm-6">stuff</div>
</div>

Open in new window


Read through the css link and look at how they did some examples http://getbootstrap.com/getting-started/#examples
0
 
LVL 9

Author Closing Comment

by:Rowby Goren
ID: 39827258
Perfect!  Looks great on desktop and mobile.

Thanks!

Rowby
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39827260
Hmmmm

Actually looking it now at Cell landscape, it doesn't quite lay out.

In a minute I'll upload a screen shot of mobile.  

I'm sure it's an easy css fix.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39827275
Hi

Here's a screen capture of cell and pretty much the same on tablet.  Looks fine on desktop

I have a separate css that kicks in for cell and tablet.

Here's the css for cell and tablet:

/*  Home Page */
  .img_float_left {
   float:left;
   margin-right:5px;
   margin-bottom:15px;
}
    .row{margin-bottom:15px;

}

div.NewsEventscontainer {
  margin-right: 15px;
   margin-top: 30px
  
}

/* Home Page */

Open in new window


and HTML  (edited for privacy)
<div class="NewsEventscontainer">
	<div class="row">
		<div class="col-xs-12">
			<img class="img_float_left" src="images/stories/image1.jpg" />
			<h3>
				Welcome </h3>
			<p>
				Content content text content . <a href="index.php?option=message-from-the"&amp;catid=37&amp;Itemid=227" target="_self">MORE</a></p>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<img class="img_float_left" src="images/image2.jpg" />
			<h3>
				Professor Awarded Book Award for AMS</h3>
			<p>
				Professor was awarded the most coveted prize. <a href="index.php?option=com_cont&amp;view=article&amp;catid=2228&amp;id=128">MORE</a></p>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<img class="img_float_left" src="images/image3.png" />
			<h3>
				Popular music musicologist </h3>
			<p>
				Professor blogs about  Society. <a href="http://net.latimes.com">MORE</a></p>
		</div>
	</div>
	<div class="row">
		<div class="col-xs-12">
			<img class="img_float_left" src="images/stories/image4.jpg" />
			<h3>
				Music Graduate Student performs</h3>
			<p>
				In conjunction this immersive art and sound experience. <a href="http://www.cnn.com/" target="_self">MORE</a></p>
		</div>
	</div>
</div>

Open in new window


Tablet and phone
Thanks!
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39827284
Did you get it figured out?

If all the pics have the same height and are not responsive, then make all the class rows a minimum height.

Let's say the pics are each 100px tall. Try making a min height of 120px;.

<div class="row">

should be
<div class="row pic_row">

Then add css
.pic_row{min-height:120px;}
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39827717
Hmmmm

The page doesn't seem to be picking up on the new css:

LInk to page

  .img_float_left {
   float:left;
   margin-right:5px;
   margin-bottom:15px;
}
    .row{margin-bottom:15px;

}

div.NewsEventscontainer {
  margin-right: 15px;
   margin-top: 30px;
  
}

.pic_row {
  min-height:160px;
} 

Open in new window


Thanks!

ROwby
0
 
LVL 52

Expert Comment

by:Scott Fell, EE MVE
ID: 39828035
The page looks fine.

Make sure the custom css is the last css loaded.
0
 
LVL 9

Author Comment

by:Rowby Goren
ID: 39828077
Yes  and it look fine on mobile.

Case closed!

:)
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
How to create a textarea which saves text in HTML 8 63
tiny glitch in my main slider 3 48
Insert Button on a table 16 47
Flex container in CSS 8 28
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question