This question already has answers here:
Why does CSS float not change the width of the following div?
(3 answers)
Keep text from wrapping around floated image
(3 answers)
Closed 8 years ago.
It's kinda hard to describe what I'm trying to do, so take a look at this fiddle:
http://jsfiddle.net/GinSan/g8mmdcuw/
As you can see, the text flows around the image, but starts at the very left of the side under the image. I want the text to keep the indentation level, even if it's height excels the height of the image. The Images at the bottom should behave like that as well, so that both the the text and the images would be indented from the left side by the image width plus it's right and left margins.
Just increasing the bottom margin of the image would probably work, however this would push everything underneath it further to the bottom if the text is too short, it has to work with different text lengths.
I accomplished to keep the text indentation at one level by adding this:
p.memberlist_descr {
width:70%;
float:left;
}
However, since the text now has a defined width, it wouldn't work on smaller screens. Also, this has no effect on the smaller images below.
Is there a way to accomplish this, if both the text length and the width of the box surrounding are unknown?
Related
This question already has answers here:
Place boxes inside ul in center, but align them left
(1 answer)
Making a container fit the width of its children
(1 answer)
Closed 3 months ago.
How do I ensure that items in a container are centered regardless of screen size?
I am trying to create a responsive/dynamic layout on a web-page that has a container div and some results/items (divs) inside. I would like them to flow within the available width but have uniform margin/alignment within the centered div which I am struggling to achieve. Here are three images of what I want to achieve. This could be a desktop, a tablet and a phone:
So far I've had to go with a cut-off width of e.g. 800px and two different layouts, but that's not optimal. The container should be dynamic, for example 90% width but the items inside fixed width of 200px. I can use flow:left; or display:inline-block; to flow the items inside, but they will always be left aligned, so that when one "slides" down to the next line, the remaining are sitting to the left with a gap to the right.
This is probably a common use case, and I'm happy to be referred to other answers, but I haven't been able to search correctly in order to find the answer.
EDIT: I know that I can do this with JavaScript. I could probably use getBoundingClientRect on the container and with code adjust the margin of the items, but there must be a CSS solution :)
This is kind of a peculiar problem. I am working on a header for a custom form where a logo is on the right side of the header and header text is centered within the logo banner.
In general, logos are narrow, so I want to center the text in the main container div like this:
In a few cases, if the logo is very long, I want to center the text on the left side. This is easy enough to do by creating a div that floats left and centering the text within:
The tricky part here (and I'm not sure it is even possible) is making the header text centered on the left side if and only if the image size is beyond a certain length. Oh--and I can't use Javascript.
Wondering if there are any CSS tricks that can get me there...
I have a fluid layout consisting of a header and a content area. The header is meant to occupy 10% of the window's height and the content area is expected to occupy the remaining 90%. Text in the entire screen should scale proportionally to the window's height. Also text in the header should be centered vertically. I am able to meet all these requirements except the last one. Anyone know how to do this?
Here's what I have so far: http://jsfiddle.net/nareshbhatia/h2s4h/
I am using Em units to do relative sizing of the text. I use JavaScript to change the font-size of the body element whenever the window is resized. This approach scales the fonts beautifully for the entire window. Finally, I tried to center the header text vertically by setting the line-height of the header to be the same as its height (i.e. 10%). This usually centers the text vertically (when the height is defined in pixels), but in this case the text does not center vertically. Any ideas on how to fix this?
Edit The jsFiddle is updated to show the suggested answer.
The line-height approach centers the text when you only have one line. You are using percentages, so I think this question might help in that respect.
What you could do instead is use some more jQuery or JS to, on load:
Measure the outer height of the paragraph (or whatever element you are using) in the .content
Calculate the bottom offset of this paragraph in relation with the .content (how much space you have remaining from the bottom border of the paragraph to the bottom border of the .content div)
Divide the remainder in two, and add that number as a top margin or top position for the paragraph.
This will let you have longer text without messing with the line-height.
If you want a pure css solution, check these alternative ways of centering vertically.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Remove white space below image
I have this page HERE. All four boxes with the images (one long horizontal and 3 smaller ones at the bottom) all have empty space below the image and above the bottom border. If I make these boxes have a pixel height it goes away but I need to leave it at auto because its a responsive site (work in progress). I cannot figure out what I'm missing. Any suggestions would be great!
CSS is HERE
Thank You!!!
You can set the images inside those boxes to:
display: block
That should solve it.
I'm trying for the life of me to figure out what should be an excruciatingly simple CSS task: aligning a block of text to the right of an image and vertically positioning the block so it aligns with the bottom of the image; and I'd prefer to not have to declare a height for the containing element as this is for a lengthy image listing and the dimensions will vary (but all with a certain max width/height). I've attempted to define a parent element with "position:relative" containing two left-floated divs, one with the image and the other with the text block, positioned "absolute" and "bottom:0" and I can't seem to get the text block to align with the bottom of the image...
any assistance here may very well help me stave off a fit of insanity ;)
If the text go to the right of the image, just use an element with display:inline-block after the image, and enclose everything in a block (like div). See it here