The `div` element automatically starts on a new line rather than expanding vertically

Check out my code here: http://jsfiddle.net/sfhs6ra1/

I'm facing an issue where I want the title of post #2 to be aligned next to the thumbnail image, taking up more vertical space instead of moving to a new line.

Any suggestions on how I can achieve this?

EDIT: It won't let me post without including some code, so here it is:

HTML

<div class="item">
    <div class="vote">
        <div class="score">1</div>
    </div>

    <a href="http://i.imgur.com/"><div class="thumbnail">
        <img src="http://i.imgur.com/P84doIKb.jpg" />
    </div></a>

    <div class="text">
        <a href="http://example.org" class="title link">Title</a>
        <a href="http://example.org" class="domain">example.org</a>
        <div class="submitinfo">submitted 1 minute ago by <span>[username]</span></div>
    </div>
</div>

// Additional item elements with similar structure but long titles

CSS

.item{
    margin-bottom: 10px;
    min-height: 55px;
    min-width: 530px;
    display: table;
    width: 100%;
}

.item .vote{
    display: table-cell;
    width: 20px;
    background-color: #fdc;
    display: inline-block;
    vertical-align: top;
    float: left;
}
.item .vote .score{
    width: 38px;
    font-weight: bold;
    margin-left: -11px;
    margin-top: 0px;
    margin-bottom: 2px;
}

// CSS styles for different item components
htmlcss

Answer №1

Here is an example of how you can achieve this:

Custom CSS Styling

.item{
    margin-bottom: 10px;
    min-height: 55px;
    min-width: 530px;
    display: table;
    width: 100%;
}

.item .vote{
    display: table-cell;
    width: 20px;
    background-color: #fdc;
    vertical-align: top;
}

.item .vote .score{
    width: 38px;
    font-weight: bold;
    margin-left: -11px;
    margin-top: 0px;
    margin-bottom: 2px;
}

.item .thumbnail{
    display: table-cell;
    max-width: 70px;
    max-height: 70px;
    vertical-align: top;
}

.item .thumbnail img{
    max-width: 70px;
    max-height: 70px;
}

.item .text{
    background-color: #cfd;
    vertical-align: top;
}
.item .text .title{
    font-size: 17px;
}
.item .text .domain{
    color: #888888;
    font-size: 11px;
    margin-left: 10px;
}
.item .text .submitinfo{
    color: #888888;
    font-size: 10px;
    margin-top: 1px;
}

View the styled elements in action on JSFiddle

The issue lies in using display:inline-block and float:left for some elements instead of display:table-cell as recommended.

Answer №2

To ensure the proper layout of your content, it is recommended to set a max-width for the .text div. In this example, a max-width of 300px has been applied, but feel free to adjust this value according to the dimensions of your container.

.item .text{
    display: table-cell;
    background-color: #cfd;
    display: inline-block;
    vertical-align: top;
    float: left;
    max-width: 300px;
}

Answer №3

It's time to make some CSS adjustments:

  1. .item .vote
  2. .item .thumbnail
  3. .item .text

If your parent class ".item" is set to display:table, then the children should have display:table-cell. Let's remove display:inline-block and float:left as they override table-cell properties.

In a table layout, there's no need for float:left as table-cells are already aligned next to each other.

Your final corrected CSS should look like this:

    .item{
    margin-bottom: 10px;
    min-height: 55px;
    min-width: 530px;
    display: table;
    width: 100%;
}
.item .vote{
    display: table-cell;
    width: 20px;
    background-color: #fdc;
    vertical-align: top;
}
.item .vote .score{
    width: 38px;
    font-weight: bold;
    margin-left: -11px;
    margin-top: 0px;
    margin-bottom: 2px;
}
.item .thumbnail{
    display: table-cell;
    max-width: 70px;
    max-height: 70px;
    vertical-align: top;
}
.item .thumbnail img{
    max-width: 70px;
    max-height: 70px;
}
.item .text{
    display: table-cell;
    background-color: #cfd;
    vertical-align: top;
}
.item .text .title{
    font-size: 17px;
}
.item .text .domain{
    color: #888888;
    font-size: 11px;
    margin-left: 10px;
}
.item .text .submitinfo{
    color: #888888;
    font-size: 10px;
    margin-top: 1px;
}

Check out the updated version here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dynamic visuals created with Jquery and Ajax

While I'm not an experienced developer, I have managed to work with some small Jquery scripts. Lately, I've been struggling for the past month trying to figure out how to implement a specific functionality that I would like to incorporate. Does a ...

jqueryhtmlcssajaxgallery

Generating a .png image using the data received from the client [node]

I need to create a highchart client-side and save a PNG of that chart server-side. After successfully generating the highchart and converting it to a PNG using the following function: function saveThumbnail(graph_name, chart) { canvg(document.getEleme ...

javascripthtml

What is the best way to horizontally center a div on an extra small screen using Bootstrap?

I am looking to design a div layout with 4 columns, but I want the content centered when the screen is in xs mode. Below is the code snippet I have used: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" r ...

csstwitter-bootstrap

Arrangement of label and input field on my webpage

I am looking to vertically align all the fields one below another. Currently, they are randomly aligned with Bootstrap CSS. The desired layout should look like this: Label1: Textbox1 Label2: Textbox2 Here is the code snippet: Which class should I use to ...

htmlcsstwitter-bootstrap

Is it possible for search engines like google to index Javascript content that is stored within divs and loaded onto the page?

My website utilizes JavaScript to dynamically add content to div elements, like so: <script> //This content is generated by PHP var contents = [ "Item 1", "Item 2" ]; //Display the first item document.getElementById( "item" ).textCo ...

javascripthtmldynamicseogoogle-search

Cannot Get jQuery .flip() to Work Automatically Every 2 Seconds

There are 3 words that I want to rotate on their x-axis every 2 seconds (repeating). Using jQuery: $(function () { count = 0; wordsArray = ["Innovation", "Creativity", "Success"]; setInterval(function () { count++; $("#words").text(wordsArray[co ...

javascriptjqueryhtml

What is the best way to divide a page into four equal sections using two container divs?

I am working on a webpage layout that requires dividing it into four equal sections. The challenge is overlapping text onto two of these sections, which complicates the design process. My solution is to stack two container DIVs on top of each other, both w ...

htmlcss-floatcontainersequals

Showcasing a JavaScript array retrieved through JSON on a web page

Apologies if I am causing any inconvenience again =x Thanks to the assistance from everyone, especially Scott Harwell, I successfully passed my php array to a js array using the code below: var horse_array = <?php echo json_encode($horse_info);?>; ...

jqueryhtmlarraysjson

Toggle visibility of a div with bootstrap checkbox - enforce input requirements only if checkbox is marked

Lately, I've been facing a strange issue with using a checkbox that collapses a hidden div by utilizing bootstrap. When I include the attribute data-toggle="collapse" in the checkbox input section, the div collapses but it mandates every single one o ...

javascriptjqueryhtmlinputtwitter-bootstrap-3

Linking a radio button to another mirrored radio button for selection

It should be a straightforward task. I have two sets of radio buttons that mirror each other, known as set A and set B Set A includes buttons 1, 2, and 3 Set B also consists of buttons 1, 2, and 3 The desired behavior is for clicking button 1 in set A t ...

javascripthtmlcss

Concealing and revealing elements through css styling

In my journey to learn HTML, CSS, and PHP, I took some online courses to gain knowledge. Now, I am venturing into creating a site using Wordpress to further enhance my skills through practical experience. Recently, I created a page with a custom video fie ...

csswordpress

Troubleshooting issues with Bootstrap's responsiveness configuration

I've been working on creating a responsive user login page using Angular 5. It looks great on full-screen display. https://i.sstatic.net/YQrL5.png However, when I resize the browser window, the responsiveness seems to break. https://i.sstatic.net/4 ...

htmlcssangulartwitter-bootstrapbootstrap-4

What is the process for configuring my form to automatically send to my email upon clicking the send button?

I found this code snippet on a website and I'm trying to figure out how to make the 'Send!' button redirect users to my email address with their message, name, and email included. Can anyone help me solve this issue? I attempted to add my e ...

javascripthtmlcss

The menu on the webpage in smartphone mode is infiltrating other divs on the page

Encountering an issue with the TwitterBootstrap CSS menu on this page when viewed on a smartphone: The div containing the menu does not resize its height, causing it to invade the content below when the "Menu" is clicked. I've been unable to find a ...

htmlcsstwitter-bootstrap

When resizing the browser, the divs stack neatly without overlapping

We need to ensure that the 4 divs stack on top of each other without overlapping! The header should have the same width as the footer, 100% The menu should stack with the header and footer The content should be centered on the page and stack with the oth ...

htmlcssoverlapping

The file type input is not directing to the correct folder in Internet Explorer version 9

Could someone please assist me with this problem in IE9? After I select a file to upload, then choose another one, it shows "fakepath" in IE9. See the image below for more information: https://i.sstatic.net/QsJFk.png https://i.sstatic.net/3nWRC.png htt ...

javascriptjqueryhtmlcss

Webstorm encounters difficulties compiling Sass

While attempting to utilize Sass in the Webstorm IDE, I noticed that it is defaulting to Ruby 1.8 (OS Default) instead of my preferred RVM Ruby Version (1.9.x). To address this issue, I tried setting the path for Sass in the Watcher-Configuration: PATH=$ ...

javascripthtmlcsssasswebstorm

"Learn how to clear an input field using jQuery with this simple guide

I've gone through a few discussions, such as this one and that one, but I'm still struggling to clear the input field after submission. What is the simplest way to achieve this? This is my current approach: $(document).ready(function(){ $(& ...

javascriptjqueryhtml

Is there a method to retrieve all Class elements without using a for-loop?

I am trying to retrieve all elements with a specific class using document.getElementsByClassName(); <body> <div class="circle" id="red"></div> <div class="circle" id="blue"></div> <div class="circle" id="yell ...

javascripthtmlcssloopsdom

Ways to eliminate basic text from HTML/HAML

Seeking a solution to align an image with CSS that is being hindered by unwanted text appearing next to it in Inspect Element. Despite pinpointing the source of the issue, attempts to remove the text have been unsuccessful and it continues to be a nuisance ...

htmlcsshaml