Edit: I cannot modify the HTML page at all or else I will automatically get a 0.
My professor just gave us this assignment where we add CSS to an HTML page. We have to follow screenshots, using the right margin, padding, borders, widths, and heights.
For multiple columns, he wants us to use float, which is all fine and dandy, but 3 columns need to be floated to the left and then centered in the page.
So while the screenshot looks like this:
My actual project looks like this:
How am I supposed to float these columns, and keep them centered?
I have set text-align for section#featured, but that only centered the text, not the elements. I can't use the display property, or I'll get points taken off. In the other screenshots he does not specify any margin or padding for the columns, so they are what they are.
They are div elements floated to the left, by the way, so their default display is block. Setting an auto margin does nothing.
Any ideas? Should I just stick it to him and use display instead of float? Because that actually works.
Look at the diagram.
Create a container to represent the dark blue/purple outline. Give it a size. Centre it.
Arrange the three side-by-side elements inside that container.
You can place your elements in a div and center it using css like
#my_div {
display: table;
margin: 0 auto;
}
Related
I am trying to center a div (popup dialog) with css.
I would like to have a universal css declaration, and I'm nearly there.
The css I'm using works, but I have to explicitly define a width to de div.
Demo
in following image the width of the popup is defined as 415px.
In following image the width is defined as AUTO.
When I look at the boxmodel in the downright corner, both are identical. My question is why is the last div wrapping to the left while it has a left margin?
I already tried all the display types. It seems the "table" and "inline-table" style are optimal for centering purpose.
Because margin: auto only works with a defined width. Otherwise the browser doesn't know how to calculate the distance from each side. And yes an alternative to using margin would be to use display: inline-block and adding text-align: center to the parent.
How to make a div to float vertically? If there is empty space above a div then it should go up and fill up the space leaving the empty space at the bottom.
float:left // for floating horizontally
I have many div which are floating horizontally with a fixed width but not a fixed height. I want them to be arranged without leaving the empty space.
How can this be done?
A div would never leave empty space above itself. It will fill the space and then the document would go on to the bottom.
I guess, there is some sort of padding or margin there.
You can try to give the divs an absolute position as:
div {
position: absolute;
top: 0;
}
This way, div will be placed almost to the top of the page! Overlapping other elements, You can give some value to top in such a way that you're giving margin-top.
I hope it helps.
Let me assume you're experiencing the following problem: you have some divs with different heights one after another in several rows. Say, there's a very tall in the first row, forcing all the divs of the second row to "dive" deeper. I have a strong feeling, that there's no cross-browser pure-css way to improve this look much at the moment. However, you can achieve at least something with
display:inline-block;
vertical-align:top
instead of
float:left.
It will look like this:
http://jsfiddle.net/wHTQ2/
if you need something better looking, please, see this question:
css float elements with unequal heights left and up in grid
I believe it's the same thing that you're looking for. Unfortunately, there's not much you can do with pure css
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.
I have a bunch of thumbnails that I wish to display in my page. The widths of the thumbnails are not necessarily all the same, and neither are the heights. What I'd like to do is arrange them in a tabular format such that elements line up in neat rows and columns with each "cell" being an equal, specified width.
I do not want to use a table as I would like the number of rows/columns to automatically re-size with a browser re-size.
I've tried sticking the images in:
divs of fixed-width with float left. The problem is because of unequal heights, wrapped divs might "catch" on the bottom of a div on the row above.
spans and lis: setting width: 200px or whatever doesn't seem to fix the width; however they do wrap fine.
If you use display: inline-block on your spans or lis, that should allow you to set the width.
http://jsfiddle.net/bnmPR/
You could use lis and make them display:inline-block;
http://jsfiddle.net/jasongennaro/zDC2w/
Drag the window over to see it work.
borders, width, and height added to show effect
you can still use you divs that float left and add this script: http://masonry.desandro.com/
It will push the divs up vertically so that they are beside each other.
I have a bunch of float: left elements and some are SLIGHTLY bigger than others. I want the newline to break and have the images float all the way to the left instead of getting stuck on a bigger element.
Here is the page I'm talking about : link
If they are all the same size if works beautifully : link
Thanks! (I'd rather not get into javascript or server side scripting if I don't have to)
Well, if you really need to use float declarations, you have two options:
Use clear: left on the leftmost items - the con is that you'll have a fixed number of columns
Make the items equal in height - either by script or by hard-coding the height in the CSS
Both of these are limiting, because they work around how floats work. However, you may consider using display: inline-block instead of float, which will achieve the similar layout. You can then adjust their alignment using vertical-align.
I fixed it by removing float:left, and adding display:inline-block instead. Haven't used it for images, but should work fine, there, too.
Use display:inline-block
You may also find vertical-align: top or vertical-align:middle useful.
This is what I did. Seems to work in forcing a new line, but I'm not an html/css guru by any measure.
<p> </p>
You can wrap them in a div and give the div a set width (the width of the widest image + margin maybe?) and then float the divs. Then, set the images to the center of their containing divs. Your margins between images won't be consistent for the differently sized images but it'll lay out much more nicely on the page.
This is an old post and the links are no longer valid but because it came up early in a search I was doing I thought I should comment to help others understand the problem better.
By using float you are asking the browser to arrange your controls automatically. It responds by wrapping when the controls don't fit the width for their specified float arrangement. float:left, float:right or clear:left,clear:right,clear:both.
So if you want to force a bunch of float:left items to float uniformly into one left column then you need to make the browser decide to wrap/unwrap them at the same width. Because you don't want to do any scripting you can wrap all of the controls you want to float together in a single div. You would want to add a new wrapping div with a class like:
.LeftImages{
float:left;
}
html
<div class="LeftImages">
<img...>
<img...>
</div>
This div will automatically adjust to the width of the largest image and all the images will be floated left with the div all the time (no wrapping).
If you still want them to wrap you can give the div a width like width:30% and each of the images the float:left; style. Rather than adjust to the largest image it will vary in size and allow the contained images to wrap.
Add to .icons div {width:160px; height:130px;} will work out very nicely
Hope it will help