Ensuring divs are inline.

  • Pastebin: https://pastebin.com/9x5crp7z

    Relevant CSS:

    .one{
	clear: both;
	margin-right: 35px;
}
.column{
	float: left;
	position: relative;
	width: 350px;
}

    Hi, I am looking to create a 2 column layout for new posts to be presented on the front page, I have managed to get the 2 columns to work (with some help from other users here), however, I am struggling to figure out how to ensure the rows line up, if it is at all possible.

    At the moment my code goes through posts and assigns them to either column one or column two. However, depending on the length of the excerpt the post items do not always line up. Is there a way to force this, or is it not possible in the current code?

    Thanks in advance. ??

Viewing 2 replies - 1 through 2 (of 2 total)

  • Line up, you mean that one does not expand another? Sure just add max-width to your styles and that should do it.

    .column{
	float: left;
        max-height:200px;
	position: relative;
	width: 350px;
}

    This is only an example, the height of 200px may or may not work, but you can adjust to fit.

    Thread Starter mfux

    (@mfux)

    Sorry, what I mean is, for example, I have a post-item class, this post-item has a set width of 350px, with the content area having a width of 735px, allowing a space in between the post-items.

    However, I also want to ensure that the top of the images in each row are inline, at the moment if a excerpt is longer than the one of the post-item next to it then the row below will have a vertical indent on one of the post items, due to each post-item having a bottom margin of 30px. Thus, as it stands the only way to ensure they are ‘inline’ is to make each excerpt identical in length to the other post-items.

    Thanks!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Ensuring divs are inline.’ is closed to new replies.