I am trying to center three divs inside of another div. I cannot seem to get it to work. My site is responsive, maybe this has something to do with it? Here is the code and CSS I have so far, any help is much appreciated!
I am trying to have all three divs .hp-highlight centered within .home-highlights:
<div id="home-highlights" class="clearfix">
<div class="heading">
<h2><span>What We Do</span></h2>
</div>
<!-- /heading -->
<div class="hp-highlight ">
<img src="http://kompufast.com/wp-content/uploads/2012/06/kompufast_sales1.jpg" title="Sales" class="hp-highlight-img" />
<h3>Sales</h3>
<p>KompuFAST+ is the right company to help you address your need for all kind of consumer technology products.</p>
</div>
<!-- /hp-highlight -->
<div class="hp-highlight ">
<img src="http://kompufast.com/wp-content/uploads/2012/02/kompufast_order1.jpg" title="Order" class="hp-highlight-img" />
<h3>Order</h3>
<p>KompuFAST-Order facilitates the ordering of products, without a fee for special order.</p>
</div>
<!-- /hp-highlight -->
<div class="hp-highlight highlight-third ">
<img src="http://kompufast.com/wp-content/uploads/2012/02/kompufast_fix1.jpg" title="Fix" class="hp-highlight-img" />
<h3>Fix</h3>
<p>KompuFAST+ has a team of dedicated repair technicians ready to diagnose your computer for all sorts of problems.</p>
</div>
Here is the CSS I have been trying:
.home-highlights {
margin-right:auto;
margin-left:auto;
width: 100%;
}
.hp-highlight {
width: 280px;
}
Won't work in IE7 or lower, but here you go.
.hp-highlight {
display: inline-block;
width: 280px;
vertical-align: top;
}
If you need IE7 and lower support, you'll have to use float.
.hp-highlight {
width: 280px;
float: left;
}
Centering of all 3 items after that point will either be by using text-align: center on .home-highlight or wrapping those 3 in another div and setting the left/right margins on it to auto.
add margin:auto; to your .hp-highlight class
here is how your css should be
.hp-highlight {
margin:auto;
width: 280px;
}
see working here: http://jsfiddle.net/RhMZ7/1/
This will work even in IE7; no floating necessary.
.home-highlights {font-size: 0; text-align: center;}
.hp-highlight {
display: inline-block;
*display: inline;
vertical-align: top;
width: 280px;
zoom: 1;
}
Related
Excuse the title of the post - I am at a loss on how to describe the design problem I am attempting to implement... (which is likely stopping me from finding an appropriate solution).
I have a wireframe/comp that came from my designer:
Which, in terms of a grid, looks something like this:
Now... the obvious problem is how do I make certain content span two rows or columns of a grid or table ? B/C the way I read this, either the squarish logo on the left or the 'coming soon' text on the top needs to span across two fields...
Is this even possible ?
Any help appreciated.
My solution would be to make each of the three sections a container using a div.
You can then position the elements as desired with adjustable margins and padding.
.container{
background: #333;
padding:10px;
color:white;
height:auto;
width:500px;
display:inline-block;
}
.icon{
float:left;
padding:5px;
height:30px;
width:30px;
background-color:green;
display:inline-block;
margin-right:10px;
}
<div class="container">
<div class="icon">
</div>
<div class="coming-soon">
COMING SOON TO MOBILE
</div>
<div class="downloads">
<button>
Apple
</button>
<button>
Android
</button>
</div>
</div>
If needed, you can target the coming-soon and downloads classes for more customization.
There are a number of solutions to this. Here's one using float:left and nested divs.
div {
float: left;
}
#group {
width: 200px;
height: 100px;
}
#one {
width: 100px;
height: 100px;
background-color: red;
}
#two {
width: 200px;
height: 30%;
background-color: green;
}
#three {
width: 200px;
height: 70%;
background-color: blue;
}
#four {
width: 100px;
height: 100px;
background-color: red;
}
<div id="one">
</div>
<div id="group">
<div id="two">
</div>
<div id="three">
</div>
</div>
<div id="four">
</div>
A much simpler layout would be to go.
HTML
<div class="wrapper">
<img style="float: left" src="your img" alt="whatevs"/>
<ul style="float:left">
<li><b>COMING SOON TO MOBILE</b></li>
<li><img src="1" alt="inline-block"/><img src="2" alt="inline-block"/></li>
</ul>
</div>
Simple CSS
.wrapper ul li img {
display: inline-block;
width: 50%;
height: auto;
}
The fact here is, the code is simplified, the layout is easy to read, its less divs, and far more less complicated. But, truth be, theres a 100 ways to do this so find the method that fits your size shoe best.
I'm trying to center 4 divs inside a bigger div with equal margin between them, and it doesn't seem to work.
I've looked at other answers and tried margin: 0 auto but it didn't work for me.
here's the HTML:
<div id="footer_frame">
mail#gmail.com
<span id="phone">044-1234567</span>
<div id="footer_icons">
<div class="icon_div">
<img src="images/youtube.png" alt="Watch our work at our YouTube page" class="icon" />
<p>YouTube</p>
</div>
<div class="icon_div">
<img src="images/email.png" alt="Contact us" class="icon" />
<p>Email</p>
</div>
<div class="icon_div">
<img src="images/googleplus.png" alt="Join our circle # Google+" class="icon" />
<p>Google+</p>
</div>
<div class="icon_div">
<img src="images/facebook.png" alt="Join our Facebook page" class="icon" />
<p>Facebook</p>
</div>
</div>
And the CSS:
#footer_frame {
position: absolute;
background-color: rgba(0,0,0,0.8);
width: 25%;
height: 16%;
top: 83%;
left: 37.5%;
}
#footer_icons {
width: 90%;
clear:both;
margin-top:12%;
}
#footer_icons .icon_div {
display: inline-block;
text-align: center;
font-size: 0.9em;
color: white;
}
#footer_icons .icon_div p {
margin: 0.2em;
}
Now it looks like this, but what I want is that the 4 icons will be centered inside the black div.
Thanks.
Wrap all four inner divs with a single DIV and then set a fixed width and use margin: 0 auto on that one.
When I do things like this I try to use flexboxes as often as possible. The above answer works perfectly but I just thought you might want to try these two options out.
#footerIcons{ display: inline-flex;} .iconDiv{ display: -webkit-flexbox;
-webkit-flex-pack: center;
-webkit-flex-align: center;
}
This should work. For more info visit this link. Before you try to use flexbox in your code make sure you have a ll the right vendor prefixes.
I dont really understand how is possible that a
<div style="clear:both"></div>
doesn't work in Chrome. I have this layout:
<div id="header">...</div>
<div id="content">
<div id="col1">...</div> <!-- float left -->
<div id="col2">...</div> <!-- float left -->
<div id="col3">...</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">...</div>
So, I've used the clear:both before the footer and/or after the col3.
It does not work either in IE7 but, in this moment I dont really care.
Can anyone help me please?
I Add more informations:
#content {
padding-top: 19px;
display: block;
}
#col1,
#col3 {
width: 21%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
#col2 {
width: 58%;
position: relative;
padding: 0 0 1em 0;
float: left;
}
SOLVED: Im sorry.... the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow...
Hope i ve been clear in the explanation..
However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
It actually works. You are just not using it properly.
If you use clear:both the following element will be effected only. So for instance,
floated left | floated left | clear: both;
floated left | clear: left;
floated left | cleawr: right; | floated: left
Imagine that each text between "|" is a block element. If you float the elements and use the clear like the example above, the code should display something like above.
Check here for a live example: Try removing the clear attribute and you will see how the browser places "DOES NOT WORK".
http://jsfiddle.net/6VjSL/
clear:both works just fine in Chrome/IE7. See this example of how to properly use it. http://jsfiddle.net/turiyag/LvMRY/2/
Can you post a link to your site, or your full actual code?
CSS:
div {
border: 1px solid black;
}
.floaty {
height: 50px;
width: 50px;
float: left;
background: green;
}
.cleary {
height: 100px;
width: 200px;
clear: both;
background: cyan;
}
HTML
<html>
<head>
</head>
<body>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
<div class="cleary">Cleary</div>
<div class="floaty">Floaty</div>
<div class="floaty">Floaty</div>
</body>
</html>
use clear:none; in the css property. It will work in chrome
Is better for semantic to use a class for this things. The correct way to go is:
HTML
<div id="header">...</div>
<div id="content" class="clearfix">
<div id="col1">...</div> <--- float left
<div id="col2">...</div> <--- float left
<div id="col3">...</div> <--- float left
<div class="clearfix"></div> <--- DOES NOT WORK
</div>
<div id="footer">...</div>
CSS:
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Yes it’s ugly, but it works very well, enabling designers to clear floats without hiding overflow and setting a width or floating (nearly) everything to get the job done.
Then it does not work anywhere ? :o)
You are probably applying the float:left to the clear:both divs too...
this works in all browsers:
http://jsfiddle.net/kKwkd/
HTML
<div id="header">aaaaaaaaaaaaaaaaaa</div>
<div id="content">
<div id="col1">bbb</div> <!-- float left -->
<div id="col2">ccc</div> <!-- float left -->
<div id="col3">ddd</div> <!-- float left -->
<div style="clear:both"></div> <!-- DOES NOT WORK -->
</div>
<div style="clear:both"></div> <!-- DOES NOT WORK -->
<div id="footer">xxxxxxxxxxxxx</div>
CSS
#header, #footer{
border: 1px dashed blue;
}
#col1,#col2,#col3{
float: left;
border: 1px solid red;
padding: 50px;
margin: 10px;
}
the information i gave you still were not enough! The problem was the content of a column!! In col1 i had a div with height:40px so even if the content was much more than 40px, for the browser it was like there was no overflow... Hope i ve been clear in the explanation.. However the Tom Sarduy's solution is interesting but doesnot work in IE... ive tried yesterday and today, but it's like the style is not taken... i see it in the developer tool of the browser but it is not applied
I got this CSS layout: http://www.cssdesk.com/Lgg4q
HTML
<div id="wrap">
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
<div class="img-wrap">
<img src="http://unikatmag.de/wp-content/uploads/2010/11/team-dummy.jpg" />
</div>
<div class="info">
<p>Lorem</p>
<p>ipsum</p>
</div>
</div>
CSS
body {
background-color: grey;
font: 18px/ Times;
color: black;
}
body, html {
height: 100%;
width: 100%;
}
p { text-align: justify; }
#wrap {
width: 80%;
margin-left: 10%;
padding-top: 2%;
position: absolute;
font-size: 14px;
background: yellow;
}
.info {
margin-right: 5%;
padding-top: 2%;
float: left;
}
.img-wrap {
position: relative;
display: inline-block;
max-width: 100%;
float: left;
margin-right: 1%;
margin-top: 1%;
}
When you resize the browser window (smaller), you can see that the behavior of the divs basically breaks the design. How to handle this problem?
My thought was to give the #wrap a height, but that won't work like it should.
Here's how I'd do it. http://jsfiddle.net/joplomacedo/TYjd5/ (I couldn't figure out how to save the changes in cssdesk so I transfered it into jsfiddle)
Basically, I added a 'wrapper', which I called block around each of the image and info blocks. I gave them a width and floated them. This way, when the browser is resized, the info and the image always go together.
Was this the behavior you were looking for. What would you want to happen on the browser resizing?
You can use min-width on #wrap and set a pixel value to prevent it from breaking.
DIV elements don't behave well when used with percentages or I can say they are not meant to be used so. You have two options in this kind of situation:
Make the design of your page in such a way that it looks like it's not responding to the browser's window resize. Take as an example this very website.
Resize your containers accordingly when the browser's window is resized. To do this you will need to use Media Css classes or maybe jQuery.
I'm using the jQuery Cycle plugin to rotate images in a slideshow type fashion. That works fine. The problem I'm having is getting these images (of different sizes) to center in the containing div. The images are inside a slidshow div that has it's position set to absolute by the Cycle plugin.
I've tried setting line-height/vertical-align and whatnot but no dice. Here is the relevant HTML and CSS
HTML:
<div id="projects">
<div class="gallery">
<span class="span1">◄</span><span class="span2">►</span>
<div class="slideshow">
<img src="images/img1.png" />
<img src="images/img1.png" />
<img src="images/img1.png" />
</div>
</div>
</div>
CSS:
#main #home-column-2 #projects
{
width: 330px;
background: #fefff5;
height: 405px;
padding: 12px;
}
#main #home-column-2 #projects .gallery
{
width: 328px;
height: 363px;
position: relative;
background: url('images/bg-home-gallery.jpg');
}
#main #home-column-2 #projects .gallery img
{
position: relative;
z-index: 10;
}
And in case you want to see it, the jQuery:
$('#home-column-2 #projects .gallery .slideshow').cycle(
{
fx: 'scrollHorz',
timeout: 0,
next: "#home-column-2 #projects .gallery span.span2",
prev: "#home-column-2 #projects .gallery span.span1"
});
Any ideas on getting these images to center?
Try this:
http://www.brunildo.org/test/img_center.html
Vertical centering is a pain! Here's what the W3C page says about the vertical center:
CSS level 2 doesn't have a property
for centering things vertically. There
will probably be one in CSS level 3.
But even in CSS2 you can center blocks
vertically, by combining a few
properties. The trick is to specify
that the outer block is to be
formatted as a table cell, because the
contents of a table cell can be
centered vertically.
This method involves a little jquery, but works fantastic in most situations...
let me explain:
if all the images of the slideshow are contained within their own element div pos:absolute and those images are pos:relative, then on a $(window).load() you can run a .each() and find each img in the slideshow and adjust it's top positioning to be offset a certain number of pixels from the top..
jcycle automatically sets each parent div containing the image to pos:absolute on every onafter() so it's useless to apply this pos adjustment to them... instead target each img you have set to pos:relative...
Here is the example:
$(window).load(function() {
// move all slides to the middle of the slideshow stage
var slideshowHeight = 600; //this can dynamic or hard-coded
$('.slideImg').each(function(index) {
var thisHeight = $(this).innerHeight();
var vertAdj = ((slideshowHeight - thisHeight) / 2);
$(this).css('top', vertAdj);
});
});
and this is the html it's working on...
<div class="slideshow" style="position: relative; ">
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img0">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 0px; "><!-- the style=top:0 is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img1">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 89.5px; "><!-- the style=top:89.5px is a result of the jquery -->
</div>
<div style="position: absolute; top: 0px; left: 0px; display: none; width: 1000px; height: 600px; " id="img2">
<img class="slideImg" src="/images/picture-1.jpg" style="top: 13px; "><!-- the style=top:13px is a result of the jquery -->
</div>
</div>
just make sure
.slideImg {
position:relative;
}
I think that's everything... I have an example, but it's on a dev site.. so this link might not last.. but you can take a look at it here:
http://beta.gluemgmt.com/portfolio/rae-scarton-editorial.html
The positions are relative according to the style sheet, so did you try setting them to display: block and margin-top: auto; margin-bottom: auto; ?
Another option is to align them manually in javascript based on the containing div's height.
You need to nest two divs inside each cycle item. The first must have the display: inline-table; and the second must have display: table-cell; both these divs have vertical-align: middle.
So the structure would look something like this:
<div class="slide-container">
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
<div class="slide">
<div class="outer-container">
<div class="inner-container">
Centered content
</div>
</div>
</div>
</div>
With the following css:
.slide-container {
height: 300px;
}
.outer-container {
height: 300px;
display: inline-table;
vertical-align: middle;
}
.inner-container{
vertical-align: middle;
display: table-cell;
}
You can see it working here http://jsfiddle.net/alsweeet/H9ZSf/6/