I have a responsive design that mostly works. Images are in their own DIV, and that div is floated left or right. Captions for the images are in the div, so they stay with the image. By default image div width is set to 30%
If I put sufficient text between successive divs I get a pleasing display, with the text wrapping around the image.
If the images are too close, however they stack, and I end up with 2 images floating next to each other, and a tiny column of text.
The use of "clear" eliminates the text too.
Is there a way to float a div so that:
Text flows around it.
A second image does not stack adjacent to it even if there is nominally room for it.
In essence I want to float an image, but ensure that it is flush to the left margin, and not be on top of something else.
At this point my process is to try each page at multiple effective widths, and add more text/move the div as needed. This is fairly time consuming. I expect with a bit of time I will find out that I need X words between DIVS,
In some cases, I will stack multiple images within a single DIV. This works well for related images.
Example of a page with the issue about 3/4 of the way down the page.:
http://sherwoods-forests.com/Trees/Leaf_Trees/Poplars/Columnar_Poplars.html
CSS file for the site:
http://sherwoods-forests.com/2col.css
Put the floated image DIVs into the text container, not as a sibling to the text container. That way the text should float around it and won't be affected by a clear in one of the image DIVs.
If that doesn't work, you'll have to post your code - this general answer is all I can give you without the actual code...
Related
I was trying to make an element not occupying any space but still visible. I don't want any possible layout-changing side-effects, which means the elements should look exactly the same after making it not taking up space.
Almost all methods provided by Google, or related answers in StackOverflow, use absolute positioning. The problem is setting position: absolute to an inline element actually changes its layout behavior.
Take this really simple layout for example:
A simple paragraph layout
My intention is to make the blue text <span> not occupying space. I set it to position: absolute:
After absolute positioning
We can see from the image that the second line of the <span> doesn't position from the start of the line anymore. It's lined up to the start position of the first line, which I assume, was to make sure the whole <span> remains a rectangular shape. But no matter what, the layout was modified after absolute positioning.
Some suggest wrapping a relative layout container around the <span>, but that won't work - as long as one absolute container is showing up, the layout breaks.
By the way, my intention on this was to emphasize a few words in a paragraph by inverting their color and background-color, and I had to make two perfect overlapping copies and style them separately in order to do so. I can't directly style one <span> because the background of multiple lines of text always overlap on the previous lines, cutting off the descenders of those letters when line-height is small, but that's another problem.
I'm trying to vertically align some text in a div by setting the line height equal to the div height. This works just fine when there's just text in the div, and also when there's a small image in the div. But for some reason, when there's an image beyond a certain size in the div, it starts pushing the text downward. Check out this fiddle I made to demonstrate it.
In the fiddle are 4 divs that all have height: 40px and line-height:40px. The only difference is the the 2nd, 3rd & 4th divs also have images of size small, medium and large:
.small{height:20px;}
.medium{height:30px;}
.large{height:40px;}
So why are the third fourth images messing up the vertical alignment?
You need to add vertical-align: middle to your img tag, because it's not inline element, its inline-block element.
See updated Fiddle
Note that your vertical alignment method will not work when your text will be more than 1 row. Use for alignments flexbox, there are really good things :)
There a small space below every image. By default, an image is rendered inline (actually it's inline-block), like a letter. It sits on the same line that other letters sit on. There is space below that line for the descenders you find on letters like j, p and q.
You can adjust the vertical-align of the image to position it elsewhere. In this case vertical-align: middle; would be fine.
This answer describes the issue in details: Mystery white space underneath image tag
Vertical align is one of those things they never got quite right - try googling some articles around it.
My instant reaction here is to try vertical-align:middle on each of your images - but no guarantees - I've always had to experiment and you may get varying results from different browsers.
The only all-browser answer I've found is to create a 2-column table (maybe within the div box, but not necessarily) and put text in one cell (text is automatically vertically centred in table cells) then put the matching image in the next cell (which will automatically expand to the height of the image).
Aren't tables brilliant? (some people don't think so...)
So, I'm working on coding my first site. It's a lot of googling for hours, then putting down the code, but I'm struggling through it, and enjoying it. However, I have a problem I've been unable to solve.
I am trying to get a div that fills the whole page by default, but that also expands when text goes past the "100%" height. I've tried using the two seperate divs to accomplish it, and it's worked. However, I am trying to use a semi-transparent div, meaning I can't stack two on top of each other, or else part of it (the "height:100%") becomes solid, while the other part (the div that expands to fit the text) is still semitransparent. Is there any way to make a div fill the remainder of the page from the point it starts? So that that way it could fill from the bottom of the 100% height to the rest of where the text fits? I would just space it using a margin-top characteristic, but the pages need to be elastic and be able to grow with the content. Sorry if this doesn't make sense.. It's hard for me to explain it without examples and being able to point. Haha.
I believe the CSS property you would want to use in this instance is min-height. If you give an element a min-height, even if the content is smaller than the min-height, it will render at that value. If the content is larger than the min-height, then it will expand to fit the size of the content.
so what I'm trying to do basically is have the HTML document extend vertically as I add more text, and at the moment it's just giving me some really weird problems, such as:
The body won't extend downward as I add more text
The footer isn't displaying at all at this point
There are some weird symbols being inserted into the document
The only way I know how to position things is absolute, and I don't know if this is causing some problems (such as getting text under the "Home" image?)
Here's the jFiddle: http://jsfiddle.net/9nYgb/
Any help is appreciated greatly, thank you!
Absolute positioning does tend to cause problems like that. Relative positioning is simple ... instead of using the top-left corner of the document as the origin for reference, the top-left corner of where the element was supposed to be is used as a reference. So <div style="position:relative;top:10px;"> will result in the element being 10px below where it would have been had no style information been provided.
When you position elements absolutely, you take them out of the document flow. This means that other elements will act as if they aren't there. It's good for placing a modal popup div on top of a page, but it's not good for laying out a whole page.
In general, when it comes to laying out a page, I try to stick to a series of divs with height and width set. You can use margin and padding to adjust layout, and float to make items stack up horizontally to one side or the other. Sometimes I also need to set a div's display to inline or inline-block to get them to appear next to one another and act like inline elements. You can also place divs within divs to group elements together and treat them as one by manipulating the outer container(s).
In general I don't find much need for absolute positioning in a page layout.
I floated 3 images in divs in the middle of a long section of text. I want to float them so the site keeps it's 'liquid' design, adapting to any width browser window. But if text starts wrapping to the left of them on wide Windows, it looks bad. I'd like them to float, but still be able to clear text around them so they look like a block element. How can I do that?
I thought maybe of sticking in a 100% width div right after the image divs, that's 1px high, and filled with a 1px image that's just the background color. Will that work?
http://www.briligg.com/frailty.html
The images in question are the ones at the beginning of the 'the cause of addiction is stress' section. Line 134 to 146, references the internal style sheet.
Put a clear: left on your section of text following the images.
That appears to be your div with class text though I don't know if you would want to universally apply the clear to all the divs with that class.