Skip to main content
Participant
October 18, 2017
Answered

I can't stop the text from wrapping under a photo

  • October 18, 2017
  • 1 reply
  • 404 views

I have a very simple "proof of concept" page that works OK, but at the top, in the header div, I have a photo floated left. I want to have text next to it, but for some reason the text breaks into separate sentences, and if there are more that 20-30 words, it starts to wrap underneath the photo. In the browser preview it looks OK, but I temporarily posted it online it online and it looked awful. I also tried to create a margin between the photo and text but failed.

Here's the code. Please overlook the clumsy structure and lack of a style sheet. I haven't done a site in a few years, so I'm having to relearn. Once I get the bugs worked out, I'll clean it up and create a proper style sheet.

Thanks

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta name="keywords" content="240z,280z,Ace Scott King,Datsun,Datsun 240z,Nissan,ProjectVF" />

<title>Other Projects by Ace</title>

<style type="text/css">

body {

    font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;

    background: #4E5869;

    margin: 0;

    padding: 0;

    color: #000;

    background-color: #FFF;

}

ul, ol, dl {

    padding: 0;

    margin: 0;

}

h1, h2, h3, h4, h5, h6, p {

    margin-top: 0;    

    padding-right: 15px;

    padding-left: 15px;

    font-size: 100%;

}

a img {

    border: none;

}

a:link {

    color:#414958;

    text-decoration: underline;

}

a:visited {

    color: #4E5869;

    text-decoration: underline;

}

a:hover, a:active, a:focus {

    text-decoration: none;

}

.container {

    width: 80%;

    max-width: 1260px;

    min-width: 780px;

    background-color: #FFF;

    margin: 0 auto;

}

.content {

    padding: 10px 0;

    margin-top: 20px;

    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;

    line-height: 150%;

}

.content ul, .content ol {

    padding: 0 15px 15px 40px;

}

.fltrt { 

    float: right;

    margin-left: 8px;

}

.fltlft {

    float: left;

    margin-right: 8px;

}

.clearfloat {

    clear:both;

    height:0;

    font-size: 1px;

    line-height: 0px;

}

.center {

        margin-left: auto;

        margin-right: auto;

        Display: block;

}

.text-justified {

    font-family: Arial, Helvetica, sans-serif;

    text-align: justify;

}

.container .content p center {

    font-size: 75%;

}

.header{

    float:left;

    height:150px;

    width:auto;

    clear: both;

}

.box1{

    min-height:330px;

    height:auto;

    width:auto;

    clear:both;

    padding-top: 5px;

    padding-bottom: 5px;

}

.box2{

    min-height: 920px;

    height:auto;

    width:auto;

    clear:both;

    padding-bottom:5px;

}

.box3{

    min-height:630px;

    height:auto;

    width:auto;

    clear:both;

    Padding-bottom: 5px;

}

.box4{

    min-height:515px;

    height:auto;

    width:auto;

    clear:both;

    Padding-bottom: 5px;

}

.box5{

    min-height:390px;

    height:auto;

    width:auto;

    clear:both;

    Padding-bottom: 5px;

}

.box6{

    min-height:420px;

    height:auto;

    width:auto;

    clear:both;

    Padding-bottom: 5px;

}

.box7{

    min-height:615px;

    height:auto;

    width:auto;

    clear:both;

    Padding-bottom: 5px;

}

</style></head>

<body>

<div class="container">

 

<div class="content">

 

<div class="header">

<img src="images/240z Header 2.png" width="415" height="150" alt="one" class="fltlft" />

<h1>Other Projects</h1>

<p>I'm always building something. Here are some of the fun things I've built in the past.</p>

 

</div>

 

<div class="box1">

<hr />

<img src="images/Ace King Age 10.jpg" width="273" height="300" alt="Riding Sulky" longdesc="http://Ace King Mower Sulky" class="fltlft"/>

<p>I was about ten years old when I created this. Our family was at a big party at a friends ranch. I spotted a sulky for a big riding mower - tractor seat, big tires, and a long yoke to connect to the back of the mower. I found a broken lawn chair with plastic wheels and an axle. I cut a 2x4 and nailed the axle to it, then drilled a hole and bolted it to the sulky. A piece of rope was perfect for steering. There was a long dirt road sloped at just the right angle. Instant entertainment for myself and the other kids.</p>

<p>The men had been having a good time and drinking beer, and initially they laughed at my oddball creation, but when I started riding down the road they decided they should give it a try. After two of the guys fell off, the women swooped in and dragged them away and nobody laughed at me after that.</p>

</div>

<div class="box2">

<hr />

<img src="images/VW Beetle Transformation.png" width="500" height="904" alt="1964 Beetle" longdesc="http://Ace King 1964 Beetle" class="fltrt" />

<p>In 1978 I was 16, and Dad and I scouted around for a VW. I found this '64 and we rebuilt it in the backyard and painted it with the help of a friend. The bodywork lessons have always come in handy, as well as watching how it was upholstered in Tijuana.   The car really turned out nice. Vintage Beetles were getting popular and mine stood out. A few years later I went for the &quot;California Style&quot; with the chrome stripped away and the front lowered. I still like that look.</p>

<p>However... the years took a toil, and with paint faded and the fenders dented, the '64 was transformed into a truly functional Baja Bug that could go practically anywhere. I took a week's vacation, bought all the parts Saturday morning and drove it out of Dad's garage a week later. I did the chop, grafted on the fiberglass, raised the suspension, and bumped the little engine up to 1400cc, all in 8 days. The following week I got an beige Earl Scheib paintjob (did the prep myself), then used rattlecans to create the camoflage. The result was an absolute blast to drive. Thru the desert, over landscaping, crashing into shopping carts - you name it and that thing would handle it.</p>

<p>A few years later I sold it. Bye-bye, Baja Bug.</p>

<p>After that I owned a '70 VW Microbus for quite a few years, but what worked well in California was a liability in Denver - super slow going up to the mountains and virtually no heat during winter. It eventually found a new home and I promised myself no more air-cooled VWs.</p>

</div>

<div class="box3">

<hr />

<img src="images/Ace King's Honda Scooter.png" width="500" height="620" alt="Honda Scooter" longdesc="http://Honda CT70 Scooter" class="fltlft"/>

<p>When I was a kid, Dad bought a 1970 Honda CT70, an odd-looking minibike with fold-down handlebars, a 3-speed transmission, and an automatic clutch. I grew up riding it around the desert and in the mountains until I got a "real" dirt bike, a Yamaha 125, when I was 13.</p>

<p>In the early 80s, little 50cc scooters were starting to pop up, so I decided to take it further using the little Honda engine. I bought a BMX bicycle and had a muffler shop bend some tubing. Dad was drafted for the welding. The result was something truly crazy. I took it out to a local dry lakebed and crouching down (and no helmet)  was paced at nearly 60 mph.</p>

<p>Like with building the Baja, I picked up a few new skills with the scooter. I ran the single wire and and a short cable thru the frame, made a straight exhaust (no muffler), welded the rear hub solid and added an aluminum sprocket, then gave it a pretty decent rattle-can paint job. It looked great and sounded great.</p>

<p>A couple of years later I pulled the engine for another project. The rolling frame was sold to a couple of kids at the flea market. I wonder what happened to it after that.</p>

</div>

<div class="box4">

<hr />

<img src="images/Ace King's Go-Kart 2.png" width="253" height="500" alt="Honda Go-Kart" longdesc="http://Honda CT70 Go-Kart" class="fltrt"/>

  

<p>The long-suffering CT70 lived again in a tiny go-kart I built. I found a beat-up cart (sans engine) in a classified ad, bought new tires by mail, and my friend Tom welded the frame  together. The seat was plywood covered with foam and canvas, the steering assembly was made with hardware store parts, and the Honda's kick-starter was converted to an awkward but functional pull-starter. Small and cramped, laughably crude, but it was a blast out in the desert. The bottom pic is the kart being flogged by my buddy Mac. It ran for one weekend, then sat untouched for the next 15 years. When I pulled the engine and gave the chassis away, it still had lake bed dust on it.</p>

<p>The engine is sitting on a shelf in my garage. I'm sure it'll be used again.</p>

  

</div>

   

<div class="box5">

<hr />

<img src="images/Ace King's ProjectVF Recumbent.png" width="300" height="375" alt="Recumbent Motorcycle" longdesc="http://Ace King ProjectVF Recumbent VF700" class="fltlft"/>

   

<p>In 2010 I had been looking at recumbent motorcycles. Europeans seem to love them, and racing legend Dan Gurney built a few, so I decided to give it a try. A Honda VF700 seemed like an ideal donor, so I bought a plastic model and some miniature railroad bridge parts and made a scaled version of my vision. It turned out better than expected, so I found a used Interceptor and did some CAD drawings. I eventually chopped the bike up, learned how to weld, did some research and experimenting, and built a proof-of-concept rolling chassis I called ProjectVF. I coasted it quite a few times down a road in some nearby hills, hitting about 25-30 mph. It rode and handled far better than I'd hoped. I tried several different versions of steering and suspensions, and ProjectVF proved to be a stable and comfortable 2-wheeled vehicle despite the lack of an engine.</p>

<p>I even made a little demo video, which you can find <a href="https://www.youtube.com/watch?v=3Nxs6iFWYBY" target="_blank">here</a>.</p>

<p>This was as far as ProjectVF went. I still have the rolling chassis tucked away, but haven't touched it in years. I doubt it'll get finished but I sure had fun building it and picked up some valuable fabrication skills along the way.</p>

</div>

   

<div class="box6">

<hr />   

   

<img src="images/Ace King CB360.jpg" width="515" height="400" alt="Honda CB360" longdesc="http://CB360 Cafe Bike Ace King" class="fltrt"/>  

 

<p>  This was my most ambitious project (until now). I bought a very tired 1976 Honda CB360 and transformed it into a show-quality cafe racer. I stripped it down to the bare frame and started modifying. The hand controls are from a Kawasaki Ninja and the rearset footpegs came from a Honda Hurricane. No battery, no electric starter, no turn signals, and so on - just the bare minimum to legally ride it on the street. I tucked the remaining electronics under the seat and all of the wiring thru the frame.</p>

 

<p>It looks a little pinkish in this photo but it's actually very bright red.</p>

<p>It runs and sounds great. Being so small and lightweight, it's fasted than stock and easy to tuck into a corner. I've never had it on a track (too scared of crashing it) but a local business park with curvy roads is nearly deserted on weekends so I did some fast laps thru there. You can see a brief video <a href="https://www.youtube.com/watch?v=q3p3DPl42qw" target="_blank">here</a>.</p>

<p>I created a website to show the various features and custom parts and you can reach it <a href="http://cbcaferacer.com/" target="_blank">here</a>. At the moment the bike is safely tucked inside my office. I took some photos  of it there and was rewarded with a half-page feature in Cafe Racer Magazine. I spent a lot of hours building it and I think the finished product was worth every minute.</p>

</div>

<div class="box7">

<hr />

<img src="images/Ace King Geo Metro Trike.png" width="500" height="595" alt="Geo Metro Trike" longdesc="http://Ace King Geo Metro Trike" class="fltlft"/>

<p>This is a project that was never built, at least not yet. The goal is a small, lightweight, single-seat commuter powered by a Geo Metro drivetrain relocated in the back. Most "modern" trikes have two wheels in front and one in the back because it's a fairly stable layout, but with the right engineering this layout can be just as safe and looks (at least to me) a lot better. The Nissan DeltaWing (see video at Le Mons <a href="https://www.youtube.com/watch?v=c_INdbXMqsw" target="_blank">here</a>) is the perfect example of how this type of three-wheeler can perform.</p>

<p>The Geo Metro engine is perfect, partly because used Metros are pretty cheap, but with a new body that's half the weight and far more streamlined, it should be faster and even get better gas mileage. On a horsepower-to-weight ratio, it's actually better than some sports cars. I think it would be amazingly fun to drive.</p>

<p>I bought some parts at a local salvage yard and used them to create 3D drawings, then designed the frame and suspension. Being able to rotate the finished model made it easy to see how everything goes together. I came very close to building it, going so far as buying a beat-up Suzuki Swift (same as a Metro) to use as the donor, but I ended up getting laid off from work, which meant the money set aside for construction was used to pay the bills. Someday I'll get back to it, but for now the 240z is my focus.</p>

</div>

<hr />

<center> <a href="index.html" target="_parent">Back to the Main Page</a> </center>

<!-- end .content --></div>

  <!-- end .container --></div>

 

</body>

</html>

    This topic has been closed for replies.
    Correct answer osgood_

    Think of your construction as a series of simple boxes, so inside your header <div> you need 2 columns, so allocate 2 columns. 1st column to house your image and the 2nd column to house your text, structure below:

    <div class="header">

    <figure class="header_image">

    <img src="images/240z Header 2.png" width="415" height="150" alt="one" class="fltlft" />

    </figure>

    <!-- end header_image -->

    <div class="header_right">

    <h1>Other Projects</h1>

    <p>I'm always building something. Here are some of the fun things I've built in the past.</p>

    </div>

    <!-- end header_right -->

    </div>

    <!-- end header -->

    You dont need to float your header left so revise that css selector to as below and add the additional 2 css selectors to your css styles. I would not set the height on the header because at 150px high the text will start to disappear, let the content determine the height of a container....

    .header{

    height:150px;

    overflow: hidden; /* wraps the container around the 2 floated <divs> inside of it */

    }

    .header_image {

    float: left;

    width: 40%;

    margin: 0;

    padding: 0;

    }

    .header_right {

    float: left;

    width: 55%;

    margin: 0 0 0 5%;

    }

    1 reply

    osgood_Correct answer
    Legend
    October 18, 2017

    Think of your construction as a series of simple boxes, so inside your header <div> you need 2 columns, so allocate 2 columns. 1st column to house your image and the 2nd column to house your text, structure below:

    <div class="header">

    <figure class="header_image">

    <img src="images/240z Header 2.png" width="415" height="150" alt="one" class="fltlft" />

    </figure>

    <!-- end header_image -->

    <div class="header_right">

    <h1>Other Projects</h1>

    <p>I'm always building something. Here are some of the fun things I've built in the past.</p>

    </div>

    <!-- end header_right -->

    </div>

    <!-- end header -->

    You dont need to float your header left so revise that css selector to as below and add the additional 2 css selectors to your css styles. I would not set the height on the header because at 150px high the text will start to disappear, let the content determine the height of a container....

    .header{

    height:150px;

    overflow: hidden; /* wraps the container around the 2 floated <divs> inside of it */

    }

    .header_image {

    float: left;

    width: 40%;

    margin: 0;

    padding: 0;

    }

    .header_right {

    float: left;

    width: 55%;

    margin: 0 0 0 5%;

    }

    Acemon99Author
    Participant
    October 19, 2017

    Thank you very, very much!