I have some basic markup along these lines:
<div class="page_content">
<p>A paragraph of text.</p>
<p>Another paragraph of text.</p>
<img src="image.jpg" />
<p>Some more text.</p>
</div>
The paragraphs are constrained in size, i.e. .page_content p{min-width:24em;max-width:36em}. I'm aiming for a responsive layout.
At large browser widths I would like to move the images out of the main flow of text to achieve a layout along these lines (n.b. image in html above may not match position shown below!):
===== = Image
--------
--------
--------
-------- ======
-------- ======
-------- ======
--------
--------
--------
--------
If I float:right the images, they scoot out of the text, with their top edge in line with their 'parent' paragraph. However, they are aligned all the way over to the right hand side of the page. I don't seem to be able to find a way to keep them flush to the right hand side of the paragraph that they sit with.
I don't want to move the images out of the main page_content div, because at small screen widths I'm looking to have the images appear in the same 'column' as the text - responsive design.
Any ideas on how this could be achieved? Is it possible? I've spent a few hours playing around but am none the wiser!
I would do something along the line of this:
http://jsfiddle.net/RjDaS/16/
I would wrap every paragraf tag in a div (this one has a class called section) and let the image be next to it. This will also work for your responsive design. However I was unable to let your image stay in the page_content div.
<div class="page_content">
<p>A paragraph of text.</p>
<div class="Section">
<p>Another paragraph of text.</p>
<img src="image.jpg" />
</div >
<p>Some more text.</p>
</div>
css:
.Section p{
float:left;
/*min-width:24em;*/
max-width:36em;
margin-right:10px;
}
.Section img{
float:left;
}
.Section{
overflow:hidden;
}
Edit: Added float left so it will stay close to the p tag. (Removed min-width for better visualization)
Related
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;
}
So my issue is as follows.
I have a div that contains both an image and a div (which contains text). The text contains a title and additional content, separated by a line break. See below or my attached codepen for an example.
<div class="outer">
<img src="something.com/pic.png">
<div class="inner">
Title<br>Additional text.
</div>
</div>
Here is my code pen
When I apply display styling of inline to the inner div, the title is inline with the bottom of the image and the text following the linebreak is below the image. Furthermore, if I wrap the text in paragraph tags, all of the text is below the image.
I would like the title to appear at the top and to the right of the image, and all content of the inner div to remain at that alignment, even if the text extends past the height of the image. Furthermore, in the future I will be adding a div with an additional image and more text inside the inner div beneath the text that is already present, and I wish for that content to maintain the same alignment.
Here is my end goal:
And my desired html structure:
<div>
<img>
<!--Start right indent (from top right of image) -->
<div>
<p>Title<br>text</p>
<div>
<img>
<div>
<p>Title<br>text</p>
</div>
</div>
</div>
<!--End right indent -->
</div>
It appears I have found the solution.
.post img{
display:inline-block;
vertical-align: top;
}
.post_content{
display:inline-block;
width: 90%;
}
My codepen: Code pen
I'm looking to create a style I can reuse that will create the following layout.
Place an image and float it left, then have text with or without paragraph tags that are positioned to the right of said image. The text will be aligned to the top of the image on the left.
I can achieve everything except the text isn't positioned at the top. Here is what I have so far, the text being centered and not top aligned.
<div style="overflow:auto">
<div style="float:left">
<img src="Images/img.jpg" />
</div>
<div>
<p>this is some text that is getting centered along the img height</p>
<p>Some more text... </p>
</div>
</div>
example of what this does. I need the 3 paragraphs aligned to top of image and 4th how it is already.
example http://www.spokanewastewater.org/Images/untitled.jpg
I would do 2 things for this.
On your first paragraph tag, add the styles below. This will remove the spacing that is caused by the first paragraph tag.
<p style="margin-top:0;padding-top:0"></p>
And on the image, the style below. Sometimes if you don't set a vertical align the image will be off a little. But I would need to see a JSFiddle to see how yours is rendering.
<img style="vertical-align:top">
Also, I should add that this should be done with an external CSS sheet and not inline, if possible.
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 website that uses a sidebar on the right. That sidebar is using "float:right" as its CSS style.
I like to add content to the main that has text floating around images, as explanations. For those images, I use "float:right" as well, and it works as expected.
The challenge starts when I add several sections of text with images under each other, like this:
1st text +-----+
text text | img |
+-----+
2nd text +-----+
text text | img |
+-----+
By default, the 2nd paragraph would start right after the 1st one's end, like this:
1st text +-----+
text text | img |
2nd text +-----+
text text
+-----+
| img |
+-----+
I learned that I should use the style clear:right between the paragraphs to keep them separated, and that works as described.
Here's the code I'd use for each of the img+text blocks:
<div>
<img style="float:right" src="animg.png" width="502" height="241" alt="bla bla">
<p>Text for the image.</p>
<div style="clear:right"></div>
</div>
However, now the sidebar starts making trouble: If the sidebar is going down further than where the clear:right appears on the left side, then there will be a gap in the content, going as far as the sidebar goes. You can see the effect here: website example with sidebar influencing clear:right
Any suggestions how to deal with that, i.e. avoid that the clear:right doesn't get affected by the sidebar's height but only by the local text+image block?
One suggestion I found so far would be to avoid using float for the sidebar, but use a table instead. But that leads to new complications (e.g. the sidebar would end up on the left unless I change the order of my html content, which would then probably lead to new issues with smaller screens and whatnot).
Your content area and your sidebar need to be in separate div tags:
<body>
<div>Header</div>
<div>Content</div>
<div>Sidebar</div>
</body>
Float the content left, and the sidebar right. You can then add as many elements inside each of those sections as you need. As long as the HTML is well-formed (i.e. not missing closing tags when needed) and they all stay within the width of their parent, they won't have a problem.
EDIT:
With a static sidebar and a fluid (elastic) main area, it gets a little more complex. First of all, remove the right-hand margin from #main, and add:
overflow-y: hidden;
Then, change the margin-right on your boxes div to:
margin: 0 2em;
That should sort the problem for you.
Enjoy the code.
HTML:
<div class="main">
<div class="box-one">Your content here</div>
<div class="box-two">Put photo here</div>
<div class="clear"></div>
CSS:
.clear{
clear:both;
}
.main{
width:100%;
background:#424242;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
}
.box-one{
width:260px;
background:#FFF;
float:left;
}
.box-two{
width:100px;
background:#FFF;
float:right;
}