Inline div causing uneven layout

Question 1

Question by Tiffany

I’m working with Twitter and have pulled a list of all my followers and their screen names down using the API. I’m trying to display them in a nice ‘grid’ on my web page. However, it currently looks like this:

Bad layout

The issue happens when the person’s screen name is so long that it goes on to two lines. I don’t know why it sometimes puts a single person on a line like that…

Here’s my CSS code:

div.inline { 
float:left; 
padding-left: 40px;
padding-bottom: 20px;
text-align: center;
font-family: sans-serif;
width: 90px;
}

And the HTML code:

<div class = "inline">
    <?php echo $userName; ?><br>
    <?php echo "<img src = ".$userImage." class = ".$class.">"; ?><br>
    <select name = "choice">
        <option value = "blank"></option>
        <option value = "cool">Cool</option>
        <option value = "uncool">Uncool</option>
    </select>
</div>

Can anyone help? Perhaps there is a way to put in a blank line after the first line of their name or something if it’s less than two lines long?

Answer

Answer by fanfavorite

fanfavorite

The reason someone is on a single line is because each div is different heights. Either wrap the username in an element (div for example) and set a height to that or set a height to the entire inline div. I think it would be nice to have the images aligned though, so the first option is best.

<div class="inline">
    <div class="username"><?=$userName;?></div>
    <?='<img src="'.$userImage.'" class="'.$class.'" alt="'.$userName.'" />';?><br />
    <select name="choice">
        <option value="blank"></option>
        <option value="cool">Cool</option>
        <option value="uncool">Uncool</option>
    </select>
</div>

For 2 lines use the following:

.username { 
   height: 30px;
   line-height: 15px;
}

Increase height by line-height value for each line you want.

Answer

Answer by Starx

Starx

Specify a fixed height for the name and image. Your problem will be solved.

Update your markup as this:

<div class = "inline">
    <div class="name"><?php echo $userName; ?></div>
    <div class="image"><?php echo "<img src = ".$userImage." class = ".$class.">"; ?></div>
    <select name = "choice">
        <option value = "blank"></option>
        <option value = "cool">Cool</option>
        <option value = "uncool">Uncool</option>
    </select>
</div>

And CSS to something similar.

.name { height: 30px; }
.image { height: 200px; }

Question 2

Question by bryceadams

bryceadams

I have some css sprites on my site in the header but when the page loads it often loads several of the 8 separate images just below where it’s meant to be. Then I wait a few seconds or hover my mouse over them and it goes back to the correct positions.

Here’s my CSS:

.x {
display: inline-block }
.x a {
display:block;
width:100px;
height:100px;
overflow:hidden;}
.x a:hover img {
margin-left:-100px;}

and then the HTML goes like this:

<div class='x'><a href='link' alt='y'><img src=
'image' /></a></div> &nbsp;
<div class='x'><a href='link' alt='y'><img
src='image' />
</a></div>

for 8 separate 100×100 squares in a row.

Answer

Answer by Starx

Starx

The way to define css sprite is a bit different then how you are doing it.

Here is an example of how this can be achieved.

/* This is how to define a main image
.sprite { background: url("../link/to/spriteimage.png") 0px 0px; width: 32px; height: 32px; }

/* Assign an image like this way, by changing the position
.sprite.icon1 { background-position: -32px -32px; }
.sprite.icon1_hover { background-position: -64px -32px; }

Demo

Question 3

Question by Shahab

Shahab

I am trying to create a web application and in it I want these two fields to display inline(check the Image below). Now the BugID is an <input> element and the Description is a <textarea>. Currently I have this:

<div class="some">
  <h3 id="title1">Bug ID:<span class="required">*</span></h3>
  <h3 id="title">Enter Description:<span class="required">*</span></h3>
  <br/>
  <div class="inputs">
  <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" />
  <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea>
   </div>
   </div>

And the CSS:

.inputs input, textarea{
      display:inline;
}

Is this wrong? How should I be doing this?

Current Implementation

Answer

Answer by JJS

JJS

Is this what you want?

   .inputs input, textarea{
          display:inline;
          float:left;

    }

Answer

Answer by Starx

Starx

I will suggest a better option. Update your markup structure to a more structure one. May be something like this

<div class="some">
    <div class="input">
      <h3 id="title1">Bug ID:<span class="required">*</span></h3>
      <input size="8" maxlength="8" name="BugID" type="text" id="BugID" placeholder="Bug ID" style="width:100px" />
    </div>
    <div class="input">
      <h3 id="title">Enter Description:<span class="required">*</span></h3>
      <textarea rows="5" id="Summary" name="summary" placeholder="Please Enter a Summary of the Bug" ></textarea>
    </div>
</div>

Now the fix: One liner CSS

.input { display: inline-block; display: table-cell; vertical-align: top; }

DEMO

Question 4

Question by JamWaffles

JamWaffles

I have the following structure in some HTML:

<ul class="li_inline">
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
    <li>
        <ul class="li_block">
            <li>Stuff</li>
            <li>Stuff under stuff</li>
        </ul>
    </li>
</ul>

With the CSS like this:

.li_inline li
{
    display: inline;
}

.li_block li
{
    display: block;
}

What I would like to happen is to have the two inner <ul>s side by side, but any <li>s inside them to be below each other. This is so I can get a sidebar and main body side by side, but elements inside them behave normally (ie. one below the other).

Can someone suggest some CSS I can use so that the inner (li_block) lists’ <li> elements are displayed as block elements, but the <ul>s themselves are displayed side by side?

Thanks,

James

Answer

Answer by Starx

Starx

Use a reset rule.

ul ul { list-style:none; padding: 5px 20px; margin: 5px 10px; }

In your case using the !important can get your job done. But try not to use it

UPDATE

Solution: http://jsfiddle.net/Starx/KHjmP/ (FF3+, Safari 4+, IE8+)

Question 5

Question by abc

abc

There is a table that the data is being loaded dynamically in to it using Jtemplate. After I right click on a row and click on edit the entire row should go to the edit mode and the cells should contain dropdowns,text,date fields etc.as well it should display save and cancel buttons onclick of edit. after clicking on save the change data should go to the database using ajax. Hope you have suggestions for this.

thanks,
abc

Answer

Answer by Starx

Starx

You cannot expect much help based on the information you provided. But I will give you a small example

HTML

<div id="mytext">Your name loaded from database</div>
<a class="triggeredit" href="javascript:void();">Edit</a>

Script

$(function() {
   $(".triggeredit").click(function() {
       var thetext = $('#mytext').html();
       $("#mytext").html('<input type="text" name="edittext" id="edittext" value="'+thetext+'" />');
   });
});

Tag: inline

Inline div causing uneven layout

Question by Tiffany

Answer by fanfavorite

Answer by Starx

css sprites – a hover with images not loading correctly

Question by bryceadams

Answer by Starx

Demo

Displaying elements inline with HTML?

Question by Shahab

Answer by JJS

Answer by Starx

<ul> within another <ul> inherits style

Question by JamWaffles

Answer by Starx

UPDATE

Jquery Inline Editing

Question by abc

Answer by Starx

Please fill the form - I will response as fast as I can!