layout issues with css and jquery

Question

I'm getting closer but still have a couple of problems laying out some css. See this fiddle.

When you click on a button the info message appears under the video as desired, but it also moves the div #help-tips-ipad down. It should stay where it is.
For some reason the length of the info message is longer than the video player. I want it to be the same size. I don't understand as I explicitly have it set to width: 320px?

Same code as the fiddle:

<p><div id="player-ipad">Video player here</div></p>
<div id="quote"><p></p></div>
<div id="help-tips-ipad">
<p>Read our Guide</p>
<p>Visit our Support Forum and ask a question</p>
<ul>
<li>Text.</li>
<li>More text.</li>
</ul>
</div>


<div id="prettytablediv-ipad">
<p>
<table id="webcam-table" class="pretty">
<thead>
    <tr>
        <th>Camera Name</th>
    </tr>
</thead>
<tbody>
<tr>
<td>
    <input type="submit" class="play" value="button1">
</td>
</tr>
<tr>
<td>
    <input type="submit" class="play" value="button2">
</td>
</tr>
</tbody>
</table>
</p>
</div>

css:

#prettytablediv-ipad {
  width: 550px;
  float: left;            
}
#help-tips-ipad {
  width: 320px;
  float: right;

}
#player-ipad {
  width:320px;
  height:240px;
  float: left;
  margin: 0 0 15px;
  border: 5px solid black;
}

jquery:

$(document).on("click", ".play", function() {
$('#quote p').html("INFO").css({'border': '1px solid', 'margin': '10px 0px', 'padding': '15px 10px 15px 50px', 'background-repeat': 'no-repeat', 'background-position': '10px center', 'color': '#00529B', 'background-color': '#BDE5F8', 'width': '320px','display': 'block','clear': 'left'});
});

Thanks in advance.

Please always include the relevant code within your question. External links are great but if they cease to exist, your question should still be useful to others. — James Montagne
– James Montagne, Commented Sep 19, 2012 at 15:12
Where is the info message supposed to go when the button is clicked? Can you make a mockup of some sort? — millimoose
– millimoose, Commented Sep 19, 2012 at 15:12
@millimoose right under the video player (or the mock up in the fiddle) and between the video player and table — Tom
– Tom, Commented Sep 19, 2012 at 15:13

chrisfrancis27 · Accepted Answer · 2012-09-19 15:19:09Z

2

This is a float-wrapping issue - the <div id="quote"> element is 100% width, you need to float it left or the subsequent elements will be forced below it. Really, you should add that AFTER <div id="help-tips-ipad"> or else the float won't do what you expect.
The padding is added AFTER the width is applied - you need to compensate for that when setting a fixed width like you've done.

See this updated fiddle for an example.

answered Sep 19, 2012 at 15:19

chrisfrancis27

4,5461 gold badge26 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tom Over a year ago

Strange my div for the table is now floating on the right when I implement this. Tried to follow your fiddle which works but still pulling my hair out.

Eru · Accepted Answer · 2012-09-19 15:26:04Z

1

You cannot wrap divs with paragraphs (
tag). Also the floated paragraph has 100% width, it should have the same width as the div above him (it's even better to wrap both with the same div)
The padding is added after width, and the total width is the sum of both so it's wider than you wanted

answered Sep 19, 2012 at 15:26

Eru

6754 silver badges8 bronze badges

Comments

Andrew · Accepted Answer · 2012-09-19 15:29:59Z

1

The reason is because you are using 320px as the width, which is then getting padding added onto this value.

{ 'padding' : '15px 10px 15px 50px' }

The browser will take 320px, and add on 10px + 50px (left and right padding) which will result in a total width of 380px;

You need to take 60px off your width, which then becomes 260px.

You then need to take into account the border too, which is 10px (5+5) on your bigger box, minus the 2 x 1px on your generated box = Add another 8px

new total width = 268px;

In short: Total width of your box is Width + left border width + right border width + left padding + right padding.

edited Sep 19, 2012 at 15:29

answered Sep 19, 2012 at 15:23

Andrew

12.8k1 gold badge37 silver badges48 bronze badges

Comments

Rezigned · Accepted Answer · 2012-09-19 15:23:45Z

0

Change the width to 270px

$(document).on("click", ".play", function() {

$('#quote p').html("INFO").css({
    'border': '1px solid', 
    'margin': '10px 0px', 
    'padding': '15px 10px 15px 50px', 
    'background-repeat': 'no-repeat', 
    'background-position': '10px center', 
    'color': '#00529B', 
    'background-color': '#BDE5F8', 
    'width': '270px',
    'display': 'block',
    'clear': 'left'}); 
});

answered Sep 19, 2012 at 15:23

Rezigned

4,9501 gold badge22 silver badges19 bronze badges

Collectives™ on Stack Overflow

layout issues with css and jquery

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related