CODEWITHSUNDEEP
csshtmlalignment
rockyraw
rockyraw

Reputation: 1145

How to align these DIVs side by side (fiddle inside)?

I've managed to align side by side the DIV containing the image, and the DIV containing the text, side by side, by applying float:left to the image DIV.

But when I Include these two DIVs in a parent DIV, and duplicate the parent and try to align the parents side by side by applying float:left to the first parent, it doesn't work.

Here's my code:

<div style="width:350px;min-height: 200px; float:left;">
  <div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
  <div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
  <div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>

<div style="width:350px;min-height: 200px;">
  <div style="float:left;"><img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"></div>
  <div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
  <div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>

and fiddle.

I also wonder whether the rest of the code is best practice, such as padding-left:135px - would it be better to use relative padding from the image, rather than the parent div? if so, what's the easiest way to change that?

Upvotes: 0

Views: 603

Answers (3)

Tricky12
Tricky12

Reputation: 6820

You had one of your float: left attributes outside of the style tag. Also, you should use CSS classes instead of putting all of your CSS styles inline. It makes your code much neater and prevents a lot of duplicated styling. Here is an updated Fiddle.

HTML

<div class="parent">
    <div class="image-wrap">
        <img class="image" src="image.jpg" width=120px height=120px />
    </div>
    <div class="title">
        Title
    </div>
    <div class="text">
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
    </div>
</div>

<div class="parent">
    <div class="image-wrap">
        <img class="image" src="image.jpg" width=120px height=120px />
    </div>
    <div class="title">
        Title
    </div>
    <div class="text">
        Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.
    </div>
</div>

CSS

.parent {
    width:350px;
    min-height: 200px;
    float:left;
}
.title {
    font-size:15pt;
    color:red;
    letter-spacing:-.04em;
    padding-top:2px;
    padding-left:135px;
}
.text {
    font-size:11pt;
    color:black;
    letter-spacing:-.02em;
    margin-top:4px;
    padding-left:135px;
}
.image-wrap {
    float: left;
}
.image {
    border: 1px solid black;
    padding:1px;
}

Upvotes: 1

Marc
Marc

Reputation: 992

You have the float:left outside of the style attribute, try moving that inside the speech marks and applying float: left to both parent divs.

Upvotes: 3

SW4
SW4

Reputation: 71170

Updated Fiddle

You can simply change your code to the below, giving each div a display:inline-block; then as long as your browser window is greater than the sum of the two div widths, they will display inline, no need for floats:

<div style="width:350px;min-height: 200px;display:inline-block;">
    <div style="float:left;">
        <img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;">
    </div>
    <div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
        <div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;"/>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>
<div style="width:350px;min-height: 200px;display:inline-block;">
    <div style="float:left;">
        <img src="image.jpg" width=120px height=120px style="border: 1px solid black;padding:1px;"/>
    </div>
    <div style="font-size:15pt;color:red;letter-spacing:-.04em;padding-top:2px;padding-left:135px;">Title</div>
    <div style="font-size:11pt;color:black;letter-spacing:-.02em;margin-top:4px;padding-left:135px;">Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text.</div>
</div>

That said I would strongly recommend you separate your CSS from your HTML in order to make a clear distinction between content and presentation and capture the clear benefits that offers.

Upvotes: 1

Related Questions