Let's say I have some structured content in HTML – for example text in paragraphs grouped into some sections. And let's say I have another instance of the same structure and I want to display both contents as two columns side by side using HTML and CSS. How to do that? The point is that I want that corresponding elements (paragraphs, sections) inside the columns are aligned so they start at the same height.
Examples of such structures may be a bilingual page, or a source code together with numbers of lines or with some side comments to individual lines.
The only idea I have is to use a table, but I'm not sure it is the best solution. I want to be able to select the content as if the column was an ordinary web page, but selecting in a table works in a way that cells in a row are selected first.
An example follows. Recall that I want the corresponding elements to start at the same height.
<!doctype html>
<html>
<head>
<title>Corresponding columns</title>
<meta charset="utf-8">
<style type="text/css">
.main {
margin: auto;
width: 500px;
}
.column {
float: left;
width: 50%;
}
.corresponding {
background-color: #FFFF99;
}
</style>
</head>
<body>
<div class="main">
<div class="column">
<h1>Section</h1>
<p>Some text</p>
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
<div class="column">
<h1>Section</h1>
<p>The text translated to another language, which may be longer.</p>
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
</div>
</body>
</html>
If you want each section/subsection to start at the same height I would suggest to do like this:
<div class="main">
<div class="row">
<div class="column">
<h1>Section</h1>
<p>Some text</p>
</div>
<div class="column">
<h1>Section</h1>
<p>The text translated to another language, which may be longer.</p>
</div>
</div>
<div class="row">
<div class="column">
<h2 class="corresponding">Subsection</h2>
<p>Some other text</p>
</div>
<div class="column">
<h2 class="corresponding">Subsection</h2>
<p>This text might also be longer so you need to push the next section's as well to start at the same height</p>
</div>
</div>
</div>
Same (almost) as a table but with div's.
I'm no "flex-box" expert so that might be a way, though with less broad browser support.
If you can't/don't want to use the "row" elements (and no/can't/don't want flex option) you will need a javascript snippet that iterate through your elements and compute margins to be set.
UPDATE
Check these 2 links, they will help you set this up as you like using flex:
- https://chriswrightdesign.com/experiments/using-flexbox-today/#card-layout
- http://codepen.io/imohkay/pen/PwPwWd/
A future proof way without using javascript.
UPDATE 2
And this one has some really cool grid solutions:
- https://philipwalton.github.io/solved-by-flexbox/demos/grids/
Well, I dont know what exactly You want... I thing that You might want two sections side-by-side, where You can place anything... Thats what I found:
make two div's <div id="first"> and <div id="second">
and place what You want in them. Now css:
#first {float:left;width:50%;}
#second {float:right;width:50%;}
Make sure You have body {padding:0; margin:0;}
If I understand your question correctly, you are searching for an HTML-structure which shows two items next to each other. Each of the properties of this item (i.e. the subsections) should have the same height. And, when the user selects the text, then the whole row (i.e. the same property from both items) should be selected.
I have the feeling that in order for the user to be able to select content the way you want, the structure needs to be correct, as I believe that the browser selects content according to the structure (not sure, this is always true though).
The question is, if you are free to use any HTML-structure you like?
When I try below example, it works for me. The solution is to use a list (ul with li) per "property" (row), making the lis display as inline-block. That way, they don't break and, as they are block elements, they always have the same height per "line". With vertical-align: top; all content starts at the beginning of the element.
I adjusted the content so we definitely have different line heights and wrapping, just to be sure it works.
Styling:
<style>
ul {
list-style: none;
}
ul li {
display: inline-block;
vertical-align: top;
width: 20%;
}
</style>
HTML:
<ul>
<li>Section 1</li>
<li>Section 2<br/>(with new line)</li>
</ul>
<ul>
<li>Some text</li>
<li>The text translated to another language, which may be longer.<br /><br />
The text translated to another language, which may be longer.
The text translated to another language, which may be longer.
The text translated to another language, which may be longer.
The text translated to another language, which may be longer.
The text translated to another language, which may be longer. </li>
</ul>
<ul>
<li>The text translated to another language, which may be longer.
The text translated to another language, which may be longer.</li>
<li>Some text</li>
</ul>
Thank to LGSon, I have learnt about flex. I tried to put together a solution. The following code somehow works, but there are some issues:
One has to add `order` attribute to all elements.
For some reason flex doesn't overlap margins like it is done in standard situation so all the vertical spaces are bigger.
It would be know hard to e.g. add a border around whole column.
<!doctype html>
<html>
<head>
<title>Corresponding columns</title>
<meta charset="utf-8">
<style type="text/css">
.container {
margin: auto;
width: 500px;
display: flex;
flex-wrap: wrap;
}
.container > * {
flex: 0 0 50%;
}
.corresponding {
background-color: #FFFF99;
}
</style>
</head>
<body>
<div class="container">
<h1 style="order: 1">Section</h1>
<p style="order: 2">Some text</p>
<h2 style="order: 3" class="corresponding">Subsection</h2>
<p style="order: 4">Some other text</p>
<h1 style="order: 1">Section</h1>
<p style="order: 2">The text translated to another language, which may be longer.</p>
<h2 style="order: 3" class="corresponding">Subsection</h2>
<p style="order: 4">Some other text</p>
</div>
</body>
</html>
Use css column-count CSS property: https://css-tricks.com/almanac/properties/c/columns/
Update
After re-reading the question, I think if you want both columns to start at the same height, you can use min-height on both columns, but be aware that the content will later push the height as it grows.
To maintain the height even with content, put a fixed height then have apply overflow-y:auto; or overflow-y:scroll. That way both boxes will have the same height, and can be scrollable in case content grows
Related
Let's say I have:
<div class='header'>...</div>
That contains multiple elements depending on the file.
In some files it looks like:
<div class='header'>
<p>
...
</p>
</div>
In others it might look like:
<div class='header'>
<p>
...
</p>
<blockquote>
...
</blockquote>
<h1>
...
</h1>
</div>
I want to create some css code that puts one box around all the <p> and <blockquote> elements (not separate boxes around each) that exist in this .header (while not including the h1 element in this box). Is that possible or do I have to write separate css for each scenario?
To make a box around the paragraph and block quote elements while leaving other sibling elements outside, create a div and put them inside that. Then add a border to that div:
.header .container {
border: 1px solid #000;
}
<div class="header">
<div class="container">
<p>Paragraph</p>
<blockquote>Block quote</blockquote>
</div>
<h1>H1</h1>
</div>
If you wanted to do this without creating another div (100% CSS), you would need to do a lot more additional styling (that would be entirely dependent on the rest of your page) to have the borders around each element connect to form one big box.
let's say I have some markup like this:
<div id="content">
<h2>Post 1</h2>
<img src="dummy.jpg">
<iframe src="youtube.com/foobar"></iframe>
<p>Sample text.</p>
<p>Second paragraph.</p>
<h2>Post 2</h2>
<img src="dummy2.jpg">
<iframe src="youtube.com/foobar2"></iframe>
<p>Sample text2.</p>
<p>Second paragraph2.</p>
</div>
How could I style this, so that all the images and iframes are in a sort of "left column" with iframe under the image, whereas the paragraphs are on a right sided column?
float:left; for img and iframe obviously doesn't work, because the iframe floats left to the img.
Thanks for any input, by now I read too much about inline elements, paddings and floating to make it all work together.
As I want to implement this into a getsimple Site (with users who can't to much html markup) it should work without div-containers.. (also if I needed them I would actually doubt this content/design seperation that CSS always promises, but makes it so hard to implement ;))
If I work with floating, I am aware that I should clear this with the h2 headings as to get a new block for each post.
#content h2 {
clear:both;
}
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help
I'm having a problem. In the following markup, there's an aside-element which contains additional information for the user which I would like to display as shown in the attached picture (right floated).
<section>
<h2>site title</h2>
<p>that's the site's main content</p>
<aside>
<h3>other stuff</h3>
<div>cloud tag</div>
</aside>
</section>
However, I don't want to place the aside-element before the h2-element and just right-float it. I know this would work, but somehow it would seem wrong to me. One could say, that the search-engines know that it's lesser-important content, since it's contained in an aside-element.
But I would also like the aside-element behave, that when the page's width is smallered (e.g. smaller devices), the aside element stays BELOW the main content.
So my question is: Is there any possibility to float the aside-element as shown in the picture, without manipulating the markup-order (adding helping div's is okay, i guess).
Thanks already, looking forward.
You need to wrap your main content in a div, and then add float: left to both the main div and your aside element. Then, just use the margin property to space them appropriately.
HTML
<section>
<div class="main">
<h2>site title</h2>
<p>that's the site's main content</p>
</div>
<aside>
<h3>other stuff</h3>
<div>cloud tag</div>
</aside>
</section>
CSS
.main {
float: left;
}
aside {
float: left;
}
See DEMO.
I have a box with an image and some txt and I want the txt to be horizontal to the image. I know this may be a pretty easy question but I can't seem to find a good answer on the interwebs. thanks for any help.
<div id='container'>
<img src='someimage.jpg'/>
<p>some text</p>
</div>
Take a look at CSS's float property, for example:
<div id='container'>
<img src='someimage.jpg' style='float: left;'/>
<p>some text (that will now wrap around the image</p>
</div>
Since Rowland's 2010 answer, CSS has come a long way. Today we have Flexbox which is a part of CSS for controlling layout of elements in a row or column. It has a great deal of flexibility for handling alignment within the box and expanding or shrinking elements to fit.
Here is a simple example of how to style the HTML you provided (with the image URL changed to one that will render here).
#container {
display: flex;
align-items: center;
}
#container p {
margin-left: 1em;
}
<div id='container'>
<img src='http://placekitten.com/100/100' alt="" />
<p>some text</p>
</div>
The MDN tutorial linked above is a good place to learn more.
I recommend you to put the text and the image in a table, in the same row, the image would be in the first column, while the text goes to the second column in the first row . here's the code
<div id='container'>
<table>
<tr>
<td><img src='someimage.jpg'/></td>
<td><p>some text</p></td>
</tr>
</table>
</div>