I've tried to align last div element / elements using text-align-last property but it didn't work. I have much divs in the center, but my page is different on each resolution so I can't control if elements will be perfectly and none of them will be in last line alone or so, that's why I want to align them to left.
Fiddle: http://jsfiddle.net/ecn8c0pt/
Picture of my site:
Adding the following CSS will work.
http://jsfiddle.net/ecn8c0pt/1/
#gallery h2{
margin: 0;
height: 80px; /*Added height for the Heading */
font-size: 1.1em;
font-weight: 300;
color: #33CCFF;
}
.project{
display: inline-block;
margin: 0 15px 40px;
width: 156px; //To show in jsfiddle i reduced the width.
text-align: left;
float: left; //MUST CHANGE: Once you align left it will automatically float to left. Also the number of count per row will depends on the window width and div width.
}
.project .thumbnail{
width: 156px;//To show in jsfiddle i reduced the width.
height: 144px;
border-radius: 3px;
}
try adding styles to your CSS like these:
float:left;
min-width: 200px;
max-width: 200px;
and try to fix the width for the wrapping div tag
for example:
.wrapper {
width:1000px;
}
see in example DEMO and try to predict the width now when you control it good luck!
Related
I am trying to make an image scroller and I am stuck with my CSS side of things. The current CSS that I have is making them going under each other not next to each other and I can't figure out how to make it work that way.
The Images are stored in a div of themselves which are under a another div called imageScroller and the imageScroller div is under the Content div.
Here is the CSS of the following divs
#content
{
text-align: center;
padding: 20px;
}
#imageScroller{
margin: 0 auto;
width: 850px;
height: 250px;
overflow: hidden;
}
.image{
float: left;
}
I think what you want is achieved by adding white-space: nowrap to #imageSlider and changing .image so that instead of float: left, it is display: inline-block.
Here's a fiddle. Adjust as needed.
The font-size: 0 in #imageSlider is to get rid of extra white space in between the <div>s.
I have 4 Images, and for some reasons my brain stopped working and i cant figure out why i cant center those.
That's the Fiddle -> http://jsfiddle.net/theminijohn/bcMX5/
If i try to just <center> them i'm getting a Deprecated Html Tag Error in my Editor.
I tried a lot of things, till rewriting the Css and Html Code, but i'm brain stuck here.
Could some Gentleman help brake my blockade ? :)
Here is one way of doing it.
Add a wrapper block element around your div's and then apply the following CSS:
.wrap {
border: 1px solid blue;
overflow: auto;
text-align: center;
}
/* Center 4 Blocks */
.hd_b {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
display: block;
text-decoration: none;
}
._hd {
margin-right: 20px;
display: inline-block;
text-align: center;
}
._hd:last-child {
margin-right: 0;
}
._hd img {
opacity: .85;
}
._hd a:hover img {
opacity: 1;
}
See demo at http://jsfiddle.net/audetwebdesign/QTxy9/
The parent .wrap block has text-align: center, and this will center the child ._hd div's that have display: inline-block.
You need to reset the right margin on the last child div using ._hd:last-child.
This works pretty well if you are willing to use the inline-block display type.
Note that any white space between inline-block elements translate into a 1ex wide space, which may not be obvious when you set the margin between blocks.
All of those divs need to be in one container div that has a fixed width. Then you can apply margin: 0 auto to the container.
http://jsfiddle.net/bcMX5/9/
Try doing this:-
Give a "main" DIV outside all img DIV "<div id="main">"
and give "margin: 0 auto;" along with some width to it.
Please refer the Fiddle: http://jsfiddle.net/aasthatuteja/6U2YJ/
Hope this should solve your issue!
would this be, want you want?
._hd {
margin-right: 20px;
display: block;
width:100%;
text-align: center;
}
Forget about margin and float ;) http://jsfiddle.net/bcMX5/8/
._hd {
//margin-right: 20px;
display: block;
//float: left;
text-align: center;
}
Depends on how you want to center the elements? If it's in a column the above answer would work. Its in a grid then wrap them in a fixed width container.
._hd_container{
width:440px;
margin:0 auto;
}
http://jsfiddle.net/RzfMP/
I'm currently having a problem with a website's footer.
When working on it at 100% size (normal size) the footer is nicely aligned. However, when I resize it it goes totally out of alignment and sits to the left, it needs to stay centred.
Screen shot:
Relevant CSS:
/* Dark blue area above the main part of the footer, stays aligned */
#footerUpper {
clear: left;
width: 100%;
vertical-align: top;
background-color: #252B76;
text-align: center;
color: #FFFFFF;
margin-top: 30px;
/* padding: 5px;*/
}
#footerUpper ul {
padding: 0;
margin: 25px 0px;
list-style: none;
}
#footerUpper li {
display: inline;
padding: 0 52px;
font-size: 14px;
font-weight: bold;
}
#footerUpper li a {
text-decoration: none;
color: #FFFFFF;
}
/* Main part of the footer */
#footer {
float: left;
width: 100%;
color: #252B76;
background-color: #89B0F1;
padding: 5px;
}
/* Table within the footer */
#footerTable {
width: 980px;
margin-left: 150px;
}
Thanks.
Without seeing more of the code, or a working example of it it's difficult to get too much of an idea about what's going wrong.
But I think a solution might be to have a static width on the inner-content, so for example the content that is mis-aligning itself, which I think is your "footerTable" - apply "margin:0 auto" to it to centre align it, this is assuming it's parent is 100% width, which I believe it is. Also, remove any other margin rules that apply to it.
It's because you're floating the footer to the left, and then there's no container of the footer which is centrally aligned. You can either:
Remove float: left and instead do a margin-left: auto; and margin-right: auto;
Make a container for your footer (or preferably your entire layout if it's all to be centrally aligned) and align the container to the center using margin-left: auto; and margin-right: auto;
There are of course other ways to centrally align block elements, but these are the most effective and recommended.
Since you have no reason to be floating the footer (so you say):
Remove the following styles:
float: left;
width: 100%;
Then, to make sure the table is centered, add this style:
text-align:center;
And you should find the footer stretches to the page width, no matter what zoom.
I want to create two DIVs, a container DIV (which contains arbitrary content) and an arrow DIV which allows the user to scroll the content horizontally.
Ignoring the Javascript aspect, the basic layout and CSS could be something like:
<!DOCTYPE html>
<html>
<head>
<style>
.outer-wrapper {
min-width:275px;
overflow: hidden;
border: 1px solid #000000;
height: 40px;
}
.container {
width: 90%;
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
.inner-content {
margin-top: 10px;
white-space: no-wrap;
position: relative;
display: inline-block;
white-space: nowrap;
}
.inner-element {
display: inline-block;
}
.arrow {
margin-top: 12px;
min-width: 30px;
font-size: 10px;
text-align: right;
margin-right: 2px;
}
</style>
</head>
<body>
<div class = "outer-wrapper">
<div id = "container" class = "container">
<div class = "inner-content" id = "inner-content">
Options Options Options Options Options Options Options Options Options
</div>
</div>
<div id = "arrow" class = "arrow">
▶
</div>
</div>
</body>
</html>
Here's a jsfiddle link showing the rendering: http://jsfiddle.net/RSTE9/1/
The problem I have is that, ideally, I'd like the DIV containing the arrow to be as small as possible, so that most the width of the screen is comprised of the container DIV.
To achieve this, I thought I'd set the container DIV to a width of like 98%, and the arrow DIV to a width of like 2%. Unfortunately, this causes the arrow DIV to wrap to the next line on smaller screen sizes.
The essential problem is that I want the arrow DIV to always take up a very small portion of the screen, but I can't find a way to do this using percentages. If the screen width is large, the arrow DIV always takes up too much space. But if the screen width is very small (say on a mobile device), the arrow DIV might be pushed to the next line. I played around with different percentage values, but there's seemingly no way to get an ideal value. I settled at a width of 90% - this looks good on small screens, but on a large screen it means the arrow DIV is taking up 10% of the screen!
I was thinking of using CSS3 media queries to adjust the percentages dynamically, but I am wondering if there is some easier solution that I'm just not thinking of.
I would suggest that using css calc would be the answer:
CSS Calc on MDN
give the arrow div a fixed size and the container a calc(100%-30px):
.container {
width: calc(100%-30px);
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
Here is an example on jsFiddle:
http://jsfiddle.net/RSTE9/5/
Notice I removed a few of the options options so you can see the effect better.
You do have a minimum width on the main container, which prevents more collapsing.
Why not set width of container as "*"?
.container {
width: *;
min-width:100px;
margin-left: 0.5em;
margin-right: 0.5em;
height: 40px;
overflow: hidden;
white-space: nowrap;
float: left;
}
jsFiddle: http://jsfiddle.net/RSTE9/6/
seems like you messed a bit with float , display and white space.
display and white space is a good clue, width a little less.
the idea is:
set the block container width no width nor overflow, but margin and white-space,
for inner content, reset white-space to normal , use display instead float.
Set min-width to text-content (100% - margin given to container)
Finally , vertical-align on both inline boxe containers text + arrow.
.outer-wrapper {
min-width:275px;
white-space: nowrap;
margin:0 1%;
}
.container {
min-width:98%;
margin-left: 0.5em;
margin-right: 0.5em;
min-height: 40px;
vertical-align:middle;
border: 1px solid #000000;
display:inline-block;
white-space:normal;
}
.arrow {
font-size: 10px;
width:1em;
text-align: right;
display:inline-block;
vertical-align: middle;
}
http://jsfiddle.net/GCyrillus/2e3du/1/
I want to center my web page footer and create a reasonable gab between it and the above content. Currently, the footer has a line and paragraph joined to the above content. I can push down the content but the line does not move. I am sure the property I am missing out in my css style sheet. Could someone help?
This is my html mark up:
<div id="footer">
<p>Copyright (c) 2010 mysite.com All rights reserved</p>
</div>
Which css property can I use to solve this problem? A sample would be appreciated. Thanks.
#footer{
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
Center a div horizontally? Typically done by setting margin: 0 auto, or margin-left: auto; margin-right: auto.
And if you want a gap above it, give it a top margin.
Use margin:auto to centre blocks with CSS, and margin-top or padding-top to make a gap above it:
#footer {
margin-left:auto;
margin-right:auto;
margin-top:2em;
}
I've used 2em for the top margin; feel free to change that as you like, even to a fixed pixel size if you prefer. You can also use padding-top as well as or instead of margin-top, depending on exactly what you need to achieve, though the centering can only be done with margin left/right, not padding.
The above code can be condensed using the shorthand margin code, which lets you list them all in the same line of code:
#footer {
margin: 2px auto 0 auto;
}
(sequence is top, right, bottom, left)
hope that helps.
I solved it with this:
#footer {
width: 100%;
height: 28px;
border-top: 1px solid #E0E0E0;
position: absolute;
bottom: 0px;
left: 0px;
text-align: center;
}
You can center the text with the following CSS
#footer {
margin: 0 auto;
}
If you want more space on top add
margin-top: 2em;
after the previous margin line. Note that order matters, so if you have margin-top first it gets overwritten by margin rule.
More empty vertical spacing above the footer can also be made using
padding-top: 2em;
The difference between margin and padding can be read about W3C's CSS2 box model. The main point is that margin makes space above the div element's border as padding makes space inside the div. Which property to use depends from other page elements' properties.
I used this code for bottom copyright.
.footer-copyright {
padding-top:50px;
display: table;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#Panel01 {
vertical-align:bottom;
bottom: 0;
margin-left:auto;
margin-right:auto;
width: 400px;
height: 100px;
}
Notes:
#Panel1 is the id for a DIV and the above code is CSS.
It is important that the DIV is large enough to contain the items
within it.
#footer{
text-align:center
}
.copyright {
margin: 10px auto 0 auto;
width: 100%;
font-family: Verdana, Geneva, sans-serif;
font-size: 10px;
font-style: normal;
text-align: center;
color: #ccbd92;
border-top: 1px solid #ccbd92;
}