Here is my html/css code. Please, move border horizontally until you get last row containing less elements then rows above.
http://jsfiddle.net/wb5kT/
Problem starts here. I do want to center entire thing horizontally, so left and right distance from page borders to text would be the same. However, last visible row should be aligned to the left.
I do not know beforehand what width of viewport will be, or total number of elements.
Adding "text-align: left" to .images aligns elements in last row to the left, but breaks entire "center align" thing. Example: http://jsfiddle.net/dgLQC/1/
Can it possibly be done without using tables?
IE 8 or lower and old versions of other browsers can be ignored.
I don't think you can do this even using tables; once you have content that's too wide for the container, the container will assume its parent's width, even though the content happens to be wrapped to fit in a smaller width.
By the way, to ensure that there is an incomplete last row (assuming more than one row) of elements, choose a prime number of elements.
put float:left in .thumb.
See this, http://jsfiddle.net/C5Pev/
Update:
My bad, above code is not working as wanted. A possible workaround would be,
http://jsfiddle.net/C5Pev/7/
Not sure if I understood your question correctly, but seems like you need to align the text inside the last row (two divs) to the left while keeping all others with the text centered:
You can apply a class for that:
.alignLeft {
text-align: left;
}
And give that class to the last two divs.
Here is the Fiddle Example!
EDITED:
Your question should be rephrased, it is leading to wrong conclusions on what your goal is, but is this what you are looking for:
See this Fiddle Example!
Relevant CSS Update:
.thumb {
float: left; // align divs to the left of each other
text-align: center; // center text inside the div
position: relative;
border: 1px solid #D9D9D9; // view the blocks, not needed
margin: 1px; // get some distance between blocks, not needed
font-size: 10px; // small text to view that's centered, not needed
}
Tip:
Shrink horizontally until you get 3 blocks by row, thus having the two divs with the text I am on the last row! alone on the last row.
Related
What's the best way to position items in two columns, each of which has display:flex? I'm coming across the problem that when the text wraps everything below it moves out of alignment. I'm fairly sure this wouldn't happen if I just used a grid, and I could alternatively position the text absolutely - but is there a better practice? Am I looking at this completely wrong?
-------------------- --------------------
image image
a header a header
that wraps at this
size
some content
content that doesn't
line up any more
justifying with space-around / space-between and using flex-grow doesn't get the desired effect because the available space is different in each column when the text wraps.
i guess i can just justify:flex-start; and then set the margin-top of each item to allow enough space?
here's a codepen of the problem. sorry if it's obvious, i'm pretty new to all this and have tried!
https://codepen.io/nwoodward/pen/ZxLWPO?editors=1100
If I understand your question correct, you want to 'center-align' the heading and the contents once it wraps.
For which, you may set a text-align center to both <p> and <h2> and also specify a width if you want the wrapping to happen after a specific limit.
.icon-card > p,
.icon-card > h2 {
text-align: center;
width: 300px; /* Optional */
}
CODEPEN
Hope this helps.
In the CSS code below, it appears that the background of divTwo has moved behind divOne. But the content of divTwo appears to have been left behind - why does the background of the div appear to move independently of the content?
#divOne {
width: 300px;
height: 100px;
background-color: yellow;
margin:5px;
float:left
}
#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;
}
<div id="divOne">Div01</div>
<div id="divTwo">Div02</div>
result in Chrome
The content of divTwo is not moving independently. The content is text, so it's rendered in a line box.
Now while unfloated, uncleared blocks ignore the presence of floated elements that precede them, the line boxes that they contain don't. The line boxes will avoid the floated element and go either alongside the floated element or, if there's no space for them there, underneath the floated element.
In your example, there is no space alongside, so the text has gone underneath the floated element. But since you've set a fixed height for divTwo, there's not enough space underneath and yet inside divTwo for the line box either. So the text content overflows divTwo, hence the text appears without divTwo's background behind it.
From Mozilla provided Float Documentation
How floats are positioned
As mentioned above, when an element is floated it is taken out of the
normal flow of the document. It is shifted to the left or right until
it touches the edge of its containing box or another floated element.
So I imagine when you declare float for divOne but not divTwo, then divTwo is following the normal flow of the document which is the same position as divOne.
You may also find Documentation for CSS Display useful.
If you do want these inline, but do not want to declare float for divTwo you can use:
#divOne {
width: 300px;
height: 100px;
background-color: yellow;
float:inline-start;
}
#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;
}
This is something quite frequently met in just simple HTML. In you current code, you are not using any containers, wrappers or rows. This leads for the elements to overlap, if you want them not to overlap, you should give them some positioning or padding. In the provided fiddle, I have added a padding of 50 px for the divTwo in order to increase it's box show it is seen better.
The main idea is that you never start simply writing code but carefully think about the positioning of each element on your webpage. A good practice would be to learn how to "stack" elements( That's how I call it, the term might not be correct). Another thing is that there are some certain front end frameworks which could teach you better by example how to do this.
Bootstrap, Zurb Foundation (But Bootstrap...I'm not sure how many people use Zurb)
Here's the JS Fiddle to see how exactly the div has changed:JS Fiddle
Like #ZobmbieChowder said, the logic of CSS float property is that you have a huge box which contains two smaller boxes, and now you want one is located on the left and another on the right. If you don't have the huge box first, the complier doesn't get human's logic which one shall be the left or right. It only makes sense for machine that you "define" a container first, then talk about its element position left or right.
Alternative to #jpat827 answer would be to either set div two's clear property to left or add an empty div after div one and set it's clear property to left. What
The clear property, if there is no space left for the unfloated element, prevents the unfloated element from going under the floated element.
When you clear the div two to left, then what it really does is that it places div two below the floated element.
let's say, div one was floated to right, then you would have to clear div two to the right, in order to bring it below div one.
If, there were three divs, out of which two were floated to left and right, then the clear property for the third unfloated div must be set to both so that it can clear past elements floated in either direction.
I hope this was helpful.
Thank You
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...)
You can see what I'm going for at http://jsfiddle.net/vW45s/. A center div with two lines of text, and text on the left and right that abuts the text at the bottom of the center div.
I would like the text to be centered on the page (either the main "hello world" or the second line). Right now I'm using an outer div with a specified width and margin: auto. If the width is too large, the text will not appear to be centered; if the width is too small for the inner text, the divs will be stacked: http://jsfiddle.net/vW45s/1/.
Is there a better way to center these three floated divs, while still getting the left and right text to align with the second line of the center div?
Any tips would be appreciated. CSS is not my strong point, but I'm learning.
Floating and centering doesn't mix well. To be able to center something, the browser must be able to determine how wide the element is. To determine it's width, it needs to know how wide the other floating divs are. Their width depends on the width of the element you want to center.
You have these options:
Try to get it to work without assigning a size. It might be possible. Be ready to spend a day or two on this to get it work with Firefox and Chrome and then one week to fix it in IE. ;)
Assign a width to all three divs
Use absolute positioning instead of floating. Make the center column 100% wide and move the side columns in front of it (one left with left: 0 and the other right with right: 0; both will need a definite width). That works until you start resizing the browser window too much (and the side columns start to overlap with the center).
Use a table or display: table-cell because table cells know about their siblings widths without floating. That means you can assign a width to the two side columns and then let the inner column grow.
PS: Yes, I know about the myth that tables are bad. The myth is a gross simplification. It's bad to nest 500 tables to get the design you want if you can get the same result with two divs and some smart CSS. But that doesn't mean you must not use tables at all.
Have you tried adding width: 33% to the left, right, and center divs along with text-align: center?
I have something similar to below:
<div style="float:left;margin-left:5px;">Test</div>
The issue is that I need to have this div repeat multiple times. If it repeats to many times, instead of forcing you to scroll right to see the rest of it (like I want it to), it instead goes down to the next line.
Example of the issue: http://jsfiddle.net/ruh7z/1/
Any help with this would be great, thanks
That behavior is exactly what floating is supposed to do. If you use table-cell for your display style, that may give you more of what you're expecting. Note that you'll have to use padding instead of margins if you use table-cell.
.container div
{
display: table-cell;
padding-left: 5px;
}
Here's a sample of this in use.
put the div's in a "fixed width" container div and prevent overflow. then have buttons or whatever at each end of the container div to "slide" the child divs left or right.