My URL http://www.ilandeistudio.com/store/
Below the main slider I have some images and categories..How can I center the div "Nelson" and lock it into place so they stay put while zooming/out?
I tried using padding-left and margin-left but they increase the space in between the categories as well. I just want to slide that entire group into the center...
Thanks!
Put those items in a container div and give that div a width and margin: 0 auto;
HTML:
<div class="nelsonContainer">
<div class=nelson>
<a href="http://www.ilandeistudio.com/store/index.php?route=product/category&path=49">
<img src="http://www.ilandeistudio.com/store/image/cache/data/illandei-120x120.png" />
OUTDOOR
</a>
</div>
<div class=nelson>
<a href="http://www.ilandeistudio.com/store/index.php?route=product/category&path=52">
<img src="http://www.ilandeistudio.com/store/image/cache/no_image-120x120.jpg" />
LIVING
</a>
</div>
/* etc. */
</div>
CSS:
.nelsonContainer {
width: 960px;
margin: 0 auto;
}
Wrap them all in a bigger div, say let's call it nelson-wrapper, and then add automatic left and right margins to it.
HTML:
<div id="nelson-wrapper">
<div class="nelson">...</div>
<div class="nelson">...</div>
<div class="nelson">...</div>
<div class="nelson">...</div>
<div class="nelson">...</div>
</div>
CSS:
#nelson-wrapper{
margin: 0 auto; /* Shorthand for 0 top/bottom, auto left/right margins */
}
EDIT:
Actually, since your divs are blocks, not inline, the above will NOT work, although the following (which I found at: http://www.impressivewebs.com/center-multiple-divs/) will work:
HTML:
<div id="nelson-wrapper">
<div class="nelson">
<div class="nelson">
<div class="nelson">
<div class="nelson">
<div class="nelson">
<div class="nelson">
</div>
CSS:
#nelson-wrapper {
text-align: center;
}
.nelson {
display: inline-block;
}
Note: This will not work correctly in Internet Explorer 8-. To get them to behave, unfortunately, the only workaround is either an Internet-Explorer-only hack, or class. The hack works as such:
CSS:
.nelson {
*display: inline;
*margin: 0 20px 0 20px;
}
Related
I want a small image on the top of the page, the logo to be precise. I have set up the bootstrap columns so that the two columns the image will span is center, but the image itself won't center within the two columns it spans. The Dreamweaver live view confirms this.
code:
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 col-sm-offset-5">
<img src="Img/Logo.png" id="logo2">
</div>
</div>
</div>
</body>
</html>
CSS:
body {
background-color:#DEE7E7;
}
#logo2 {
position:absolute;
width:30%
}
The #logo2 id is mostly just my attempt at centering it, and removing it does not fix the problem. I have looked at the bootstrap documentation and can't figure it out.
You can either apply a text-align: center; to the image's container using Bootstrap's text-center class. E.g:
<div class="col-sm-2 col-sm-offset-5 text-center">
<img src="Img/Logo.png" id="logo2">
</div>
Read more here: http://getbootstrap.com/css/#type-alignment
Or you can style logo2 to display as a block with auto margins. E.g:
#logo2{
display: block;
margin: 0 auto;
max-width: 100%;
}
#logo2 {
display: table;
margin: 0 auto;
}
My question is about CSS and DIV tags. I have a dynamic page, and I would like one container DIV. There are two scenarios: in one case, this container DIV will just have one DIV in it, with a width of 50%, and should be centered. In the other case, there will be two DIVs in it, and they should be side by side, each taking up 50%.
I have tried float:center (using overflow: hidden on the container DIV), and that works for 1 DIV in it, but with two, they are stacked on top of each other. If I use float: left, then the 2 DIVS appear correct, but the single DIV is left aligned, not centered.
Any help on how to achieve this effectively would be greatly appreciated!
<div style="width:800; margin: 2px; background-color:blue">
<div style="width:50%; background-color:orange;">
Text
</div>
<div style="width:50%; background-color:red;">
Text
</div>
</div>
jsFiddle
For the two-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
<div style="background-color:red; display: table-cell;">
Text
</div>
</div>
Now for the one-div scenario:
<div style="width:800; margin: 2px; background-color:blue; display: table;">
<div style="background-color:orange; display: table-cell;">
Text
</div>
</div>
In each case, the inner divs, whether there are 1 or 2, will take up a combined 100% of the outer div. Essentially, it acts like the <table> element without having the semantics of a <table>.
check this fiddle
HTML
<div class="wrapper">
<div class="divholder">
<div style="background-color:orange;">DIV 1</div>
<div style="background-color:red;">DIV 2</div>
</div>
</div>
CSS
.divholder div{
display:inline-block;
margin:auto;
width:49%;
}
.divholder {
text-align:center;
margin: 0 auto;
position:relative;
}
.wrapper{
width:100%;
background-color:blue;
}
This perfectly deals with your need..While there is only one div, the div gets centered and if two divs come then both will be equally divided and floated left.Please see the fiddle..
Similar to chharvey's answer, this can be achieved nicely with display: table;
In my example it is centered horizontally and will work with any number of columns as they will fit themselves to the full width of div.wrap. The columns are currently given a height of 100%, this can be adjusted.
Have a jsBin example!
HTML
<div class="wrap">
<div class="column">
</div>
<div class="column">
</div>
</div>
CSS
html,body {
height: 100%;
}
.wrap {
display: table;
width: 800px;
height: 100%;
margin: 0 auto;
}
.column {
display: table-cell;
background: #FF0;
}
.column:first-child {
background: #F00;
}
I am trying to have a centered element on a page, and have another element to the right of it that displays some info. I've tried floating the element to the right, and it looks good for me, but I have a big display. I resized the browser window and it pushes the centered element down, which I don't want. I want it to be like on this page: http://imgur.com/XVuMBx6, where the photo container element is centered, and the thing to the right with all the links is to the right of it, but when you make the display smaller nothing gets pushed down, but the right element just gets moved out of the browser window.
My css looks like this, #image is the div I want to have centered, and #info and .sharebutton are what I want to the right of it:
#image {
max-width: 900px;
display: block;
margin:auto;
position: relative;
}
#info, .sharebutton {
display: inline-block;
float: right;
position: relative;
}
I tried setting a clear:both on the image element, but for some reason this warps my #info and .sharebutton elements to the left side of the page. Thanks.
EDIT: My HTML:
<div id="info">
<ul>
<li>Uploaded: {{time}}</li>
<br>
<li>Views: {{view_count}}</li>
</ul>
<div class="sharebutton">
<a href="#openModal">
<button id="share">Click Me</button>
</a>
<div id="openModal" class="modalDialog">
<div>
X
<h2>Modal Box</h2>
</div>
</div>
</div>
</div>
<article>
<div id="image">
<a href="{{source}}">
<img src="{{source}}" />
</a>
</div>
</article>
A basic approach is something like this:
article {margin: 0 200px;}
#info {width: 190px;}
That keeps the centered area out of the way of the sidebar items.
For #info, .sharebutton use margin-right:0 insted float
let's do this a little differently :)
Have a fiddle - Fiddle link!
Here there are two big blocks: div#image and div#info. Both are floated to the left. The <body> is centered with margin: 0 auto and a max-width.
CSS
body {
margin: 0 auto;
/* Center body */
max-width: 900px;
}
#image {
max-width: 900px;
float: left;
margin: 0 20px 0 0;
}
#info, .sharebutton {
float: left;
}
HTML - slightly different... <article> first.
<article>
<div id="image"> <a href="{{source}}">
<img src="http://placehold.it/450x400">
</a>
</div>
</article>
<div id="info">
<ul>
<li>Uploaded: {{time}}</li>
<li>Views: {{view_count}}</li>
</ul>
<div class="sharebutton">
<button id="share">Click Me</button>
<div id="openModal" class="modalDialog"> X
<h2>Modal Box</h2>
</div>
</div>
</div>
I have tried everything to get a div of dynamic width (highlightsContainer) to center within its parent. I think it has something to do with the fact that this div takes up 100% of the parent container width, no matter what I do.
I have tried to set it to inline-block, but that does not fix it. Dev Tools still shows it as taking up 100% of the parent container width. The children of .highlightsContainer are not forcing it to this width.
Here is my markup:
<div class="highlightsContainerWrapper">
<div class="highlightsContainer">
<a href="#video">
<div class="highlightEntry">
<img src="../img/portfolio/lr/lr-highlight-1.png" />
<div class="highlightLabel">Mobile Site</div>
</div>
</a>
<a href="#email">
<div class="highlightEntry">
<img src="../img/portfolio/lr/lr-highlight-2.png" />
<div class="highlightLabel">Video Gallery</div>
</div>
</a>
<a href="#social">
<div class="highlightEntry">
<img src="../img/portfolio/lr/lr-highlight-3.png" />
<div class="highlightLabel">jQuery Modals</div>
</div>
</a>
<a href="#blog">
<div class="highlightEntry">
<img src="../img/portfolio/lr/lr-highlight-4.png" />
<div class="highlightLabel">SEO</div>
</div>
</a>
</div>
</div>
And my CSS:
.highlightsContainerWrapper {
float: left;
}
.highlightsContainer {
display: inline-block;
margin: 0 auto;
}
.highlightEntry {
width: 18%;
margin: 3% 1%;
float: left;
position: relative;
overflow: hidden;
border: 1px solid #fcfbe7;
}
You can do something like this:
.highlightsContainerWrapper {
float: left;
width: 100%;
text-align: center;
}
Works for dynamically generated content. You won't have to set a width on .highlightsContainer
Working jsFiddle demo
To add to the previous comment, this could also work as well without having to have the width be 100 percent each time if you don't want it to be.
.highlightsContainerWrapper {
float: left;
text-align:center;
}
Then you can make the width whatever you want it to be.
Hoped that helped you center the div
I need to create a centered grid of squares with text inside it. With jQuery help user will be able to add or remove squares (in row and column).
Basically the code would be:
<style>
div.square{
padding: 5px;
margin: 5px;
border: 1px solid green;
/*display: inline-table; /* IE fail*/
/*display: inline-block; /* IE fail*/
float: left;
}
div.row{
margin: 0 auto;
}
</style>
<div style="width:500px; border:1px solid red; margin: 0 auto">
<div class="row">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div style="clear:both"></div>
<div class="row">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div style="clear:both"></div>
<div class="row">
<div class="square">1</div>
<div class="square">2</div>
<div class="square">3</div>
</div>
<div style="clear:both"></div>
</div>
What is the best way to do it?
Are you looking for something like this:
http://jsbin.com/etunuk/1/
Floated elements shrink wrap, so they need a width attached.
To center floated elements you need to add their width + paddings + margins + borders and assign that width to the wrapper, in this case .row and center .row.
If you remove the border, you need to remove the width, 1px * 6 from the row width and so on.