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.
Related
Isn't the first time I want all content inside all sections are in a container with a max-width, but the only solution is duplicate html tags. Something like this:
<body>
<section class="one">
<div class="wrapper">
// content for one
</div>
</section>
<section class="two">
// There is a background here
<div class="wrapper">
// content for two
</div>
</section>
<section class="three">
<div class="wrapper">
// content for three
</div>
</section>
<section class="four">
// There is a background here
<div class="wrapper">
// content for four
</div>
</section>
</body>
Putting a div "wrapper" inside looks like the only solution to control every section with a max-width/centered and keeps the ability to put a full-width backgound in few section.
I don't like this solution, is a div duplicated for every section with same properties. If someday I change my mind and want remove it or I need to do it in every section or I need to remove css to that selector. Its look not semantical for me.
Any solution?
I would create a div like this
<div id="maindiv">
<div id="sitecontainer">
<!-- inner content -->
</div>
</div>
Then you can control max width from one place for all section. IF you don't want max width for a section, remove the site container div from within that section. You change your mind on the width? Change it in one place. You decide to go 100% width, change the width to 100% inside that div. Makes it easy to manage sitewide..
Your css
#sitecontainer { float: left; width: 1000px; margin: 0 auto; }
#maindiv { float: left; width: 100%; }
Then if you add another div,
<div id="secondarydiv">
<div id="sitecontainer">
// content still 1000px centered
</div>
</div>
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;
}
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
In order to make websites more accessible I have been encouraged to use HTML5 tags <header>, <footer>, etc... to only surround the actual content, but I have a feeling that I might be doing something wrong.
An example body:
<header>
<div class="center">
<h1>Title</h1>
<nav>
...
</nav>
</div>
</header>
<div>
<section>
...
</section>
</div>
<footer>
<div class="center">
...
</div>
</footer>
.center {
max-width: 70em;
margin: 0 auto;
}
header {
width: 100%
background-color: red;
}
footer {
width: 100%
background-color: green;
}
body > div {
width: 100%
background-color: blue;
}
Is it actually better like this?
<div id="head">
<header>
<h1>Title</h1>
<nav>
...
</nav>
</header>
</div>
<div>
<section>
...
</section>
</div>
<div id="foot">
<footer>
...
</footer>
</div>
As for what is better — DIV inside structural elements like HEADER/FOOTER or structural elements inside DIV, it does not matter since DIV is common container without any semantic sense at all.
What is really unsemantic/bad-practice in your first example is center class name. Class names should reflect purpose of block (content, products, etc.), not its presentation (center, red, etc.).
Basically, that div elements are not required semantically speaking (maybe you need them for styling?).
div is an element without semantic (as its counterpart for inline elements span) and you have to use them where there isn't anything better. Even if you give them some semantic with its id attribute, that semantic is only known by you and not for, for example, any web search motor (google) or any screen reader (for blind people, for example), because there aren't any definitive conventions about id or class values.
If you use header, footer etc, you are giving them semantics. Maybe you want to increase their semantic using some value for the role attribute.
By the way, that section surely it isn't needed. Look at what people from HTML5 Doctor say:
In HTML 5 you can specifically mark up all the “secondary” content on
a page such as navigation, branding, copyright notices, so it feels
odd that you can’t specifically mark up the most important part of
your page—the content.
But what would be the purpose of marking it up specifically, anyway?
If you need to style it, use a div. An assistive technlogy like a
screenreader can find the main content because it is the first thing
inside a page that isn’t a header, nav or footer.
With a <div role="main"> you have everything you need.
It'd be better like this:
<header>
<h1>Title</h1>
<nav>
...
</nav>
</header>
<section>
...
</section>
<footer>
...
</footer>
Or alternatively:
<div class="header">
<h1>Title</h1>
<div class="nav">
...
</div>
</div>
<div class="section">
...
</div>
<div class="footer">
...
</div>
Why are you being told to add those extra wrapper div elements?
Try
<section>
<header> head content </header>
main content
<footer> footer content </footer>
</section>
This get's rid of all those silly divs and now you have your header and footer linked to your section like they should be.
I like the h1 element because it specifies the contents are header style contents, but you're not supposed to put things like images or divs inside an h1, so is there an alternative to an h1 that I can put other markup in?
My current html looks like this:
<div class="section">
<h1>
<div style="float:left">header text</div>
<div style="float:right">text</div>
<div style="clear:both;float:none;"></div>
</h1>
<div>body contents</div>
</div>
I like the h1 because I can add a css style to any h1 with a div.section class, but I'm not suppoed to put divs in it...
You could always do
<h1>header text <span>text</span></h1>
Then you handle the css for clearing the floats and floating the second text in the css file.
You should use a semantic image replacement method: Which makes for the most elaborate design (images, colors ect.. the graphic is your oyster) as well as being completely semantic and accessible.
Otherwise as mentioned above, you can add any element that is an inline element: A, SPAN, ect... inside of your H1... but I would shy away from this if you are interested in semantics and being SEO friendly.:
<style>
h1{
background: url('../path/to/image/image_to_replace_header.jpg') no-repeat top left; // Sets the BG that will replace your header
text-indent: -9999px; // Moves the test off screen
overflow: hidden; // Hides the staggered text for good
width: 300px; // Sets width of block(header)
height: 100px; // Sets height of block(header)
}
</style>
<h1>My Awesome Site</h1>
Now your text is still technically there, but you have a pretty photo in its place. Sighted, non sighted, and robot friendly.
The method i personally prefer is to keep the <h1> tags intact and use <span> tags instead of divs inside them. You can style the spans to be display:block and then treat them like divs if need be. This way, the semantic meaning of your <h1> tags is kept, and needless <divs> are omitted. Read up on divitis.
This won't solve your problem if you need to include images inside your <h1> tags. You probably shouldn't be adding graphical styling with img tags anyways, but rather applying the image as a background to the the <h1> element, moving style-related graphics out of your markup into your CSS files.
Is there a reason you don't specify just:
<div style="float:right">text</div>
<h1>header text</h1>
<!-- <div style="clear:both"></div> only if really necessary -->
This will keep your markup semantic, still float text to the right and keep it out of the h1 tag which it is semantically not part of.
To answer your question directly: yes you can use another method. It keeps your CSS editing ability, as well as having a proper H1 element:
<div class="section">
<div id="Header">
<h1 style="float:left">header text<h1>
<div style="float:right">text</div>
</div>
</h1>
<div>body contents</div>
</div>
All the important text is in the H1 and you can still style it as you like.
You can use html5 structural elements :
<section>
<header>
<div>header text</div>
<div>text</div>
</header>
<article>body contents</article>
</section>
Just reverse the nesting order of some of your code:
<div class="section">
<div style="float:left"><h1>header text</h1></div>
<div style="float:right"><h1>text</h1></div>
<div style="clear:both;float:none;">body contents</div>
</div>
I'm not sure that the right-floated text was supposed to be h1, but you get the idea. Often these things are best solved by keeping block-elements on the outside and nesting the line-elements within them.
Headers have semantic meaning. Think of a magazine and why they use headers. If you want to place an image in a header for decoration purposes, use a background-image. I cannot think of a reason why you would need to put an image into a H1 for contextual purposes.