I'm not sure if this question has been answered (I think it probably has), but how do you center this dynamic div?
(I want #two to align itself to the middle position of #one.)
Right now my jsFiddle does this: http://jsfiddle.net/sE8Sc/4/
HTML :
<div id="one">
</div>
<div id="two">
<a class="stuff">a</a>
<a class="stuff">b</a>
<a class="stuff">c</a>
</div>
CSS :
#one { width:100%; height:200px; background-color:#222; float:left; }
#two { text-align:center; float:left; }
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; float:left; }
I've tried margin:0 auto;, text-align:center; but still no dice. I'm not looking at declaring a defined margin like margin:0 41%; because if I wanted to add another <a class="stuff"> to the list it would get out of position...
Anyone? This is probably some simple positioning error that I can't figure out.
EDIT : I was looking around, and I saw this demo by Nivo Slider -- http://demo.dev7studios.com/nivo-slider/ -- how is it defining itself with a 960px width?
You'll need to wrap both #one and #two in a containing element. That should set the width. Then all you need to do is remove all the floats (on #one, #two and #two's children). JSFiddle
#wrapper { width:500px; }
#two { text-align:center;}
.stuff { width:20px; height:20px; background-color:#444; margin:0 5px; }
New markup.
<div id="wrapper">
<div id="one"></div>
<div id="two">
<a class="stuff">a</a>
<a class="stuff">b</a>
<a class="stuff">c</a>
</div>
</div>
Without the wrapper two would just be aligned to the center of your window (or a parent with a width).
You center a dynamic div by cimply giving it a display: table value
DEMO http://jsfiddle.net/kevinPHPkevin/sE8Sc/20/
#two {
text-align:center;
display: table;
margin: 0 auto;
}
Related
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
Im busy making this website homepage but have come across a problem which must be so simple but i just can't find it anywhere, I want to position both 'topskin' and 'topskin2' next to each other, i will also be adding more which i also want next to each other.
Here is the HTML :
<div id="secondinner">
<div id="topskin">
</div>
<div id="topskin2">
</div>
This is the third segment to the home page.
</div>
Here is the CSS:
#secondinner {
padding-top:300px;
width:980px;
margin:0 auto;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
}
Just to inform you, i have tried float:left, on both elements, and instead of going below each other they simply disappear.
I see at your image, your element are floarting out of div. You must set overflow:hidden to their parent to avoid that.
#secondinner {
overflow:hidden
}
Each child must be floated:
#topskin, #topskin2 {
float:left
}
There are two ways doing that.
Use float:left on #topskin and topskin2
use display: inline-block; on #topskin and topskin2
Try to use float.
FIDDLE
#secondinner {
padding-top:300px;
width:980px;
margin:0 auto;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
border:2px solid;
float:left;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:150px;
border:2px solid;
float:left;
}
You just have to add display: inline-block..
With this code, even if you add as many as images with div having class img-container they will appear inline.
Here's working code for you.
<div id="secondinner">
<div id="topskin" class="img-container">
</div>
<div id="topskin2" class="img-container">
</div>
This is the third segment to the home page.
</div>
img-container is class having following css property.
.img-container{
display:inline-block;
}
JSFIDDLE DEMO : http://jsfiddle.net/rahulrulez/5mnxqphx/
I am trying to position the second image inline next to the one before, the second image is smaller and i want it to sit on the same bottom line next to the larger one next to it. this will create a gap above the second image where i can put a small bit of text.
My problem is when i play around with background-size:, height: and width: to change the size of the image it just goes to the top left hand corner of its surrounding div.
I plan on having 4 more small image next to the small one so I'm asking please could anyone sort out the positioning of the divs and css so that i can easily add more next to the prior one,
Here is an image to give you an understanding of what i am trying to achieve, The red box shows where i want it to be positioned, and the other red box is where i will have the next skin.
LINK
Things i have tried:
Bottom:0
margin-top ( to push it down ) though this does not leave room for me to add text above the smaller images
padding-top:
Here is my current CSS:
#secondinner {
width:980px;
margin:0 auto;
overflow: hidden;
}
#dailyskin {
width:120px;
height:20px;
background-color:#336699;
color:white;
font-size:14px;
text-align:center;
padding-top:1px;
}
#topskin {
background-image:url(images/topskins/1f.png);
background-size:110px;
height:220px;
background-repeat:no-repeat;
width:110px;
dislpay:inline-block;
float:left;
margin-top:5px;
}
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:5px;
}
#downloadbutton1 {
width:100%;
}
#firstskin {
width:110px;
overflow:hidden;
float:left;
}
#secondskin {
width:100px;
overflow:hidden;
float:left;
padding-left:10px;
}
Here is the HTML:
<div id="secondinner">
<div id="dailyskin">Todays Daily Skin!</div>
<div id="firstskin">
<div id="topskin"></div>
<button id="downloadbutton1" type = "button" name = "Download"> Download </button>
</div>
<div id="secondskin">
<div id="topskin2"></div>
<button id="downloadbutton1" type = "button" name = "Download"> Download </button>
</div>
</div>
This is the third section to the index page.
</div>
Here is a JS fiddle to show you what i mean,
http://jsfiddle.net/bjbear123/qdwgpaqc/
display: table-cell; with a vertical-align: bottom could be a good solution.
Have a jsBin!
HTML
<div class="skin-wrap">
<div>
<img src="http://www.placehold.it/100X300" />
<button>Download</button>
</div>
<div>
<p>text above </p>
<img src="http://www.placehold.it/100X200" />
<button>Download</button>
</div>
</div>
This is the third section to the index page.
CSS
.skin-wrap {
display: table;
}
.skin-wrap > div {
display: table-cell;
width: 100px;
vertical-align: bottom;
padding: 10px;
}
And if you don't want / are not able to use table-cell as misterManSam answered you can use nested divs with position absolute.
.wrapper{
position: relative;
height: 200px;
width: 100px;
}
.content{
position: absolute;
bottom: 0;
}
<div class="wrapper">
<div class="content">
<img src="whatever.jpg" />
</div>
</div>
And there you have a little jsbin http://jsbin.com/jiqakefu/1/
One easy solution is to increase the top margin of topskin2.
#topskin2 {
background-image:url(images/topskins/1f.png);
background-size:80px;
height:150px;
background-repeat:no-repeat;
width:80px;
dislpay:inline-block;
float:left;
margin-top:75px;
i tried this on jsfiddle both download button were inline.
You can set margin as per your need, if you want space between both then you can use margin-left to create gap.
you were right doing it through bottom:0;
The thing you missed was to set position:absolute; and for outer div position:relative;
Here's a fiddle: http://jsfiddle.net/Nive00/qdwgpaqc/2/
I am trying to get three divs lined up beside each other. the left div has a fixed width, the middle has a percent width, and the third should take up the remaining space. Here is the code I have come up with:
HTML:
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
CSS:
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
background-color:#CCC;
height:40px;
}
I have made the two left divs transparent so you can see that the background of the right div extends all the way to the left of the page. How can I fix this? I have tried floating the right div however it doesn't fill the rest of the space. here is a fiddle I used.
The easiest solution would be to just wrap the 3 div Elements in a container, like this:
<div id="container">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
And then just make the child elements display: table-cell and the parent display: table and width: 100%.
#left, #middle, #right {
display: table-cell;
}
#container {
display: table;
width: 100%;
}
I order to force the #left Element to keep it's width even when there is very little space, I'd suggest to also add min-width: 200px to it's CSS.
Demo: http://jsfiddle.net/eMbV7/11/
S.B. provided a great answer, but here's an alternative method just for fun. You could have everything display:block; like normal, then float:left;, and use calc() to get the width of the final column. It would just be 100% - 55% - 200px, or compressed, 45% - 200px.
Benefit to this is that you don't need to have the #container. Potential issue is browser support, mostly mobile browsers. See: http://caniuse.com/calc
HTML:
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
CSS:
#container {
width: 100%;
}
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
float:left;
background-color:#CCC;
height:100px;
width:calc(45% - 200px);
}
Demo: http://jsfiddle.net/eMbV7/9/
Use this code, I have wrapped all div in a container div.
<div class="container">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>
& css
.container{
display:block;
padding:0 0 0 200px;
}
#left {
float:left;
width:200px;
height:100px;
background-color:#A00;
opacity:0.3;
margin:0 0 0 -200px;
}
#middle {
float:left;
width:55%;
height:100px;
background-color:#0A0;
opacity:0.3;
}
#right {
float : right;
width: 45%;
background-color:#CCC;
height:40px;
}
Here is jsFiddle link DEMO
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}