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
Related
I'm trying to get a layout similar to this one below:
The problem is that I can't seem to get the headline to not wrap but the paragraph to wrap. Here's what I've tried so far:
Floating. I've floated the image right, but that wraps everything. Tried floating the text left, that didn't seem to fix the issue. Tried white-space nowrap, this was very close, only I couldn't set a width at all to the headline so it just fell off the page.
Fixed paragraph width. Setting a fixed width to the paragraph doesn't work because I need it to wrap below the image. I also can't do to paragraphs, as I need this to be responsive and not have a gap between the two paragraphs as the text expands horiztonally to fill more space.
Contenteditable = true. I used a combination of an empty container set to the size of the image and to float and contenteditable = "true" on the paragraph. This by far got me to the closest outcome, although I ended up in trouble because I have a series of about 4 blocks of these on a page, each with a different amount of content. This meant that placing the float container directly over the image is nearly impossible. To keep the wrap, as well, I can't set the container to position: absolute. Also, the container has to be directly next to the paragraph to work, which makes positioning that much more challenging.
I think I either need a solution to get that container div to always be in the exact same place as the image, or a solution to wrap the paragraph but not the header. I'm open to any and all solutions at this point. Here's a sample of what the DOM looks like for each one of these sets:
<div class="box"> <!-- container for the chunk -->
<img src="" />
<div class="box-txt"> <!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
<h2>This is the headline that shouldn't wrap.</h2>
<div class="imgblock"></div> <!-- this element empty and set to float -->
<p contenteditable="true">This is the paragraph that I need to wrap.</p>
</div>
</div>
You simply have to position the floated element directly before the text block, after the header (as you already did in your code example). Then a float: right; will work the way you describe it:
.box {
width: 600px;
}
.imgblock {
width: 300px;
height: 300px;
background: #ddd;
float: right;
}
<div class="box">
<!-- container for the chunk -->
<img src="" />
<div class="box-txt">
<!-- container for the text so that I can position it on top of the image -- I've tried removing this and run into more positioning challenges -->
<h2>This is the headline that shouldn't wrap.</h2>
<div class="imgblock"></div>
<!-- this element empty and set to float -->
<p contenteditable="true">This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need
to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph
that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap. This is the paragraph that I need to wrap.</p>
</div>
</div>
I Have a parent div 'site-branding' with 3 child divs inside it. The first element is an image with a logo, the second element the site title and the last element is the tagline. See HTML below:
<div class="site-branding">
<div class="site-logo"></div>
<p class="site-title">Title</p>
<p class="site-description">Some text here</p>
</div><!-- .site-branding -->
I want the logo to be in one column and then the title and tagline vertically aligned in column 2, something similar to this:
where left = logo, right top = title, right bottom = tagline. Now the caveat: I'm using a wordpress theme and subscription that limits how much i can customize - I cannot see or edit source files. So I CANNOT edit the html and wrap divs and containers etc nor can I add an javascript/jquery. It has to be done in CSS with the above HTML configuration.
EDIT: Ignore paragraph in right bottom block - the site tagline would just be a header as represented by the text "right bottom".
Cheers
This should do it:
.site-branding > .site-logo {
display: inline-block;
width = 50%;
margin-left: 0px;
}
I want to create a floating box on the right and put a picture inside it.
And I want to paragraph to be on the left of it and - when it's long enough - below the picture too. And additionally to this I want to put another floating box with a picture inside on the left side a bit more downside. And let the text inside the paragraph also go around it.
So first I managed to do now I created the first part with a floating box on the rigt and text around. But how can I put another picture below in a floating box on the left now and address it separately in CSS?
HTML:
<body>
<div class="picture">
<h1>this is the first heading</h1>
<p><img src="Images/car.jpg" alt="car">sample
<img src="Images/car2.jpg" alt="car2">
</p>
</div>
</body>
CSS:
div.picture img {
float: right;
width: 300px;
height: 200px;
}
I think your issue is that the <p> tag is a block-level element, so your floating <div> is sitting below it. If you style your paragraph to be inline-block, for example, you should get what you're looking for.
But you should be able to just put your img directly in your paragraph, and float it to the right, and then the paragraph should flow around the image as necessary.
GOAL:
Trying to create this "newspaper author" layout in HTML/CSS:
SOLUTION/PROBLEM:
I've floated a box to the left, and I have text and various content which wraps around this box. Problem is, some of the content has background-color and other CSS effects that spill over into the box. How can I accomplish this layout without the spilling over problem?
<div id="main-content">
<aside id="side-box">
left-floated box.
</aside>
<p>
Various content that may have background color etc.
</p>
</div>
DEMO:
http://jsfiddle.net/HU277/1/
Closest I could find to a duplicate issue:
CSS: Newspaper layout with two columns and a quotation box centered?
add overflow: hidden; to your H1 tag (an re style padding etc...)
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.