1

Here is a prototype of what I am trying to implement enter image description here

Here is what I currently have : JsFiddle enter image description here

I am trying to get the picture of the guy on the laptop to align correctly with and to the right of the paragraph components - Business Traveller, Office Supply Purchases, etc...

What I've tried is using Align attribute, changing my img src code to 

<img id="laptop" align="middle" src="zoom-39988392-3.JPG" height = "90" width ="90" />

but that didn't have any effect. I also tried Float but that messed up my margins and the organization of my left components.

Is there a way I can do this without floating?

Community
  • 1
  • 1
committedandroider
  • 8,711
  • 14
  • 71
  • 126

2 Answers2

3

See the fiddle

The HTML and CSS that i've used is as follows. Used float:left

HTML

<div class="container">
    <div id="choices">
        <p class="choice">Business Traveller</p>
        <p class="choice">Office Supply Purchases</p>
        <p class="choice">Stay at home parent</p>
        <p class="choice">Entertainment</p>
        <p class="choice">Profile 6</p>
    </div>
    <div class="image"></div>
</div>

CSS

html, body, .container {
    height:100%;
}
#choices {
    width:30%;
    float:left;
}
.choice {
    margin-top:0px;
    margin-left:20px;
    text-align:center;
    width:100%;
    background-image: url("http://i.imgur.com/H43sVoi.png");
    padding-top:15px;
    padding-bottom:15px;
}
.image {
    height:100%;
    width:65%;
    background-color:red;
    float:left;
}

You will have to work with the height and width of each divs. I just made it roughly.

Lal
  • 14,726
  • 4
  • 45
  • 70
  • Is it better to use table/cols like what @webcodecs said? – committedandroider May 07 '15 at 06:40
  • 1
    @committedandroider It is better to use div structure then table. Check http://jsfiddle.net/uggopbhk/7/ – ketan May 07 '15 at 06:43
  • I dont think using table for this is not a good idea..I think what @webcodecs suggested was to use a two-column layout in which the 1st column contains the navigation and the second column contains the image. – Lal May 07 '15 at 06:43
  • 1
    Yes, i meant a 2 column layout with floating divs. Please do not use tables for layouting. – webcodecs May 07 '15 at 07:17
  • @ketan This is more of a concept question but I know that height and width are with respective to the block element, in this case the div. How did you get the div that contains the laptop picture to stretch to that much? I saw that you used vertical align but that only sets the vertical aligment - http://www.w3schools.com/cssref/pr_pos_vertical-align.asp – committedandroider May 07 '15 at 15:53
  • Can you guys take a look at this one? http://stackoverflow.com/questions/30106602/how-to-make-image-stretch-to-a-specific-paragraph/30107373#30107373 It's based off this question – committedandroider May 07 '15 at 17:09
1

You have to create two columns. 1 column for the menu and the second column for the image. If you do this, you wont have trouble floating.

Lal
  • 14,726
  • 4
  • 45
  • 70
webcodecs
  • 217
  • 2
  • 9