I defined two CSS classes that set the background to an image (shown below). One is a yellow block, and another is a grey block.
.block-gray { background: url('grey.gif'); width: 15px; height: 3px; }
.block-yellow { background: url('yellow.gif'); width: 15px; height: 3px; }
What I want to be able to do is to define a variable number of div's using one of the classes above, and have them horizontally stacked, and centered within a larger container.
So if I defined 3 blocks like so:
<div>
<!-- The # of these is variable, and not necessarily fixed at 3 -->
<div class="block-yellow"></div>
<div class="block-yellow"></div>
<div class="block-grey"></div>
<div>
Then I would like them to be centered within the outer div, no matter how many inner divs there are. I can use float:left to stack them horizontally, but I'm not sure how to keep them centered.
| |
Any ideas?
Thanks.
.container { text-align: center; }
.block-yellow { display: inline-block; }
and you might want to reset that text-align:
.block-yellow { text-align: left; }
well, don't use float:left; instead, use display:block and set the outer div as text-align:center
Related
On the site I'm currently coding I have a centered DIV containing a float left column and a smaller float right column. This works fine.
In the Left floating column, I have a further float left column, containing an bio image, and a float right text column containing the bio text.
However, I am at the point of throwing my computer out of the window because the last two bio divs are sitting on top of each other, with the text underneath the photo instead of floating next to it.
I have put every combination of clear divs and overflow: hidden; I can reasonably think of, but to no avail.
The page in question is here: http://test.phantomlimb.net/about.php and the CSS is here: http://test.phantomlimb.net/phantom.css
I would greatly appreciate anyone pointing me in the right direction to solve this annoying conundrum before I break down and *gasp!* accomplish the same effect using tables in around 3 minutes!!!
PS I'm more of a designer than a coder, so please feel free to explain things as you would to a child.
Did you try this?
Add float: left; to your .bioleft class in phantom.css
Alternatively add float: right; to your .bioright class
You are missing colons in your css file. e.g. you have
.bioleft {
float left; /* HERE */
width: 25%;
background: red;
display: block;
}
.bioright {
float right; /* AND HERE */
width: 70%;
background: cyan;
display: block;
}
You should have float: left; and float: right;
IT is because of improper syntax you have float left; it should be float: left;
Have you considered using floated divs for the container left and right divs, then just use inline blocks for the divs inside the floated divs?
<div id="left">
<div id="img"></div>
<div id="content"></div>
</div>
And
#left {
float: left;
}
#img,#content {
display:inline-block;
}
#img {
width: 100px;
}
#content {
width: calc(100% - 100px);
}
That should put the image and the content side by side, but they will be treated as a block div.
You could actually put both the image and content divs inside their own container div and name that biog as the id, to create its own 'block'
I have a container with multiple anchor tags styled as buttons (it could have more or less buttons):
<div class="menu-container">
<div class="button-container">
Action1
Action2
Action3
Action4
Action5
</div>
</div>
How ca I style this using CSS to be able to have those buttons listed as a grid with 4 columns max? I tried with display:inline-block and float:left but without success.
I know that I need to fix a width for the container but I'm not able to but all anchor tags inside the container. And this must be dinamic as is could have more or less buttons...
What I'm trying to achieve is something like:
You need to give the links a width and height in addition to float or inline. Also, you need to define a width for the parent element, so that you can define where they can 'float' to.
.button-container {
width: 520px;
background: gray;
overflow-y: auto;
}
.button-container > a {
width: 100px;
height: 100px;
float: left;
background: lightgray;
margin: 15px;
}
Here is an implementation with jsfiddle
Next time try to include an example with fiddle so we can understand what you have already tried and where the code could have gone wrong.
Not sure if this is what you are looking for. http://jsfiddle.net/H9Ypc/
I added a div with the css properties
.action-container{
display:inline-block;
margin-bottom: 5px;
}
Definitely suggest inline-block over float.
I have a block with information, floating left and a button group, floating right.
The information block has 2 rows. The first row holds information on top, but the 2nd line should be vertically centered using the whitespace available (the white space is created by the floating right button group).
How can this be done ?
HTML:
<div class="rowWrapper">
<div class="moduleInfo">
<div class="moduleTitle">Module1</div>
<div class="moduleTime">08-05-2013 11:12:33</div>
</div>
<div class="actions">
<button type="submit">Action1</button>
<button type="submit">Action2</button>
<button type="submit">Action3</button>
<button type="submit">Action4</button>
<button type="submit">Action5</button>
</div>
</div>
CSS:
.rowWrapper {
border: 1px solid #a29791;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
margin: 4px 0;
padding: 4px;
overflow: hidden;
}
.moduleInfo {
float: left;
}
.actions {
float: right;
}
.actions button {
display: block;
}
I have a fiddle created for this:
http://jsfiddle.net/DrDelete/bLw79/
If the available size is always the same, you can use line-height:
http://jsfiddle.net/bLw79/2/
if you try center-vertically, it won't work,you can try 2 options
1) line-height:40px;
2)position:absolute; top:50%; height:240px; margin-top:-120px; //margin-top = 1/2 height
i would prefer using the 1st option
Add the following in your CSS:
.moduleTime{
padding-top: 35%;
}
But I suggest you to use table here since it will provide your moduleTitle text more flexibility as you can see by changing the text in your code and then changing the moduleTitle text in the code provided on this Fiddle
Vertical centering is a little tricky one. If there's only one line of text you can always use line height. But, in case you have multiple lines of text or images this technique is not going to work. Instead, change the parent display property to table (display:table). And give the vertical align to center (vertical-align:center) to the child elements. That's it, now child elements will be vertically aligned within parent. And don't forget to give a height for parent.
I would consider myself to be an intermediate/advanced CSS/HTML coder but I'm stumped on how to do the following scenario.. I'm starting to think it is impossible but I really want to believe it is..
Let's say the wrapper width is 1000px.
Within it is three columns. The two outside columns are the same width, this width is decided by the center column. The center column is the only one with content, just one line of text with 30px of padding on either side. So if the line of content is 100px with padding, than the other two columns would be (1000-100)/2 each..
Is there a dynamic way to have the two outside columns adjust to the varying width of the center column that is defined by its varying contents, one line of text?
Graphic of what I am trying to accomplish:
The very closest I could come up with was to use display: table; and table-cell. This creates the dynamic effect you're looking for, but I don't think you can get your desired effect without setting an explicit width to the center element.
HTML:
<div id="wrap">
<div id="left">
Left
</div>
<div id="center">
center
</div>
<div id="right">
Right
</div>
</div>
CSS:
#wrap
{
width: 1000px;
display: table;
}
#wrap div
{
display: table-cell;
border: 1px solid #000;
width: auto;
}
#center
{
padding: 0 30px;
text-align: center;
}
You can check out my attempt here, it has some buttons for you to see the different states, width on/off and add text etc. (the jQuery has nothing to do with the solution)
I think this is as close as you're going to get with pure CSS.
Good 'ole tables to the rescue:
http://jsfiddle.net/hgwdT/
Actually I think tables are the devil, but this works as you described. And so here it is using display: table-cell on the child divs, so it is functionally the same using nicer markup:
http://jsfiddle.net/XXXdB/
The center element can indeed have a dynamic width; to prevent the content from being squished, I simply added a white-space: nowrap to the p containing the text.
I also confirmed that this solution works in IE8 and FF, in addition to Chrome.
This not the most elegant solution, but it works. I wanted to go the pure CSS route, but couldn't figure it out. Nice work, jblasco and Kyle Sevenoaks, on figuring that out!
Here is my jsFiddle demo. If you don't mind using a little JavaScript though (utilizing jQuery in my example):
HTML:
<div id="wrapper">
<div class="side"></div>
<div id="middle">One line of text.</div>
<div class="side"></div>
</div>
CSS:
#wrapper {
margin: 0 auto;
width: 1000px;
}
#wrapper div {
float: left;
height: 300px;
}
.side {
background: #ddd;
}
#middle {
background: #eee;
padding: 0 30px;
text-align: center;
}
JavaScript:
var adjustSize = function(){
// Declare vars
var wrapper = $('#wrapper'),
middle = $('#middle'),
totalWidth = wrapper.width(),
middleWidth = middle.width(),
middleOuterWidth = middle.outerWidth(),
remainingWidth = totalWidth - middleOuterWidth,
sideWidth;
if(remainingWidth % 2 === 0){
// Remaining width is even, divide by two
sideWidth = remainingWidth/2;
} else {
// Remaining width is odd, add 1 to middle to prevent a half pixel
middle.width(middleWidth+1);
sideWidth = (remainingWidth-1)/2;
}
// Adjust the side width
$('.side').width(sideWidth);
}
I want to achieve this:
width=60px width = remaining space
|------| |-----------------------------------|
| div1 | | Loren ipsun... |
|------| | |
| div2 |
|-----------------------------------|
Sample html on jsFiddle.
Is it possible to place two divs side-by-side leaving the second div with all remaining space?
Just float the first div, and set the margin-left of the second div to accommodate the width of the first div. Something like this:
div.one {
width: 60px;
float: left;
}
div.two {
margin-left: 60px;
}
Keep in mind that the width CSS property on the div only applies to the content, so you need to set the margin-left to be the sum of the width, border, margin, and padding properties of the first div.
Here is the updated version of your jsfiddle. Let me know if you have any questions about it.
Here it is:
CSS:
#container { background: silver; width: 100% }
.image
{
background: green; color: green;
width: 60px; height: 60px;
float: left;
}
.content
{
background: blue; color: white;
margin-left: 60px;
}
And on jsFiddle (It's playing up at the moment)
Hope this helps!
Here is how it will be done :
.image {
background:green;
color:green;
height:60px;
position:absolute;
width:60px;
}
.content {
background:blue;
color:white;
margin-left:60px;
}
Try this:
<html>
<head>
<title>Tabla de contenidos - Template</title>
<style type="text/css">
div {
border: 1px solid #000000;
}
#divleft{
width: 60px;
float: left;
}
#divright{
display: block;
margin-left: 62px;
}
</style>
</head>
<body>
<div id="divleft">This DIV has a width of 60px.</div>
<div id="divright" >This DIV occupies the rest of the page...</div>
</body>
</html>
The 62px margin is to avoid overlap the 1 extra px of each border.
another option is to use the flexible box model
this working proposal is supported in recent firefox, chrome, and safari.
it can be ported to unsupported browsers using flexie.js.
there is new way to arrange elements whit CSS3
Check here this page Flexbox Froggy, a game where you help Froggy and friends by writing CSS code!
Guide this frog to the lilypad on the right by using the justify-content property, which aligns items horizontally and accepts the following values:
flex-start: Items align to the left side of the container.
flex-end: Items align to the right side of the container.
center: Items align at the center of the container.
space-between: Items display with equal spacing between them.
space-around: Items display with equal spacing around them.