Here's what I've tried,the problem is that it only center my div when I set a fixed width in px.
How can I make the width to fit to the inner text?
HTML:
<div id="enclose">
<div id="problem">
MY TEXT HERE
</div>
</div>
CSS:
#problem {
margin-right:auto;
margin-left:auto;
width:200px;
}
#enclose {
position:fixed;
bottom:0px;
width:100%;
}
JSFiddle:
http://jsfiddle.net/7bqsdt6o/2/
You can use text-align: center on your parent div i.e. <div id="enclose">, this would center your <div id="problem">.
#enclose {
position:fixed;
bottom:0px;
width:100%;
text-align: center;
}
<div id="enclose">
<div id="problem">
MY TEXT HERE
</div>
</div>
You can use text-align: center on parent element (#enclose) or the CSS3 feature width: intrinsic;.
Working code (at least on Chrome 38) - CodePen
Related
I have a main div that has a background-color. I put a login window in that div with a width:675px; height:300px; Also have margins for the top/bottom of the window. The background isn't growing to accommodate the div. here's the code i'm using:
<div class="main">
<div class="topLine"></div>
<div class="loginWindow">
<div class="logo">
TEXT
</div>
</div>
<div style="clear: both"></div>
</div>
CSS:
.main {
background: linear-gradient(to bottom right, #152d47, #467ba7);
width:100%;
height:100px;
padding-top:8px;
overflow:hidden;
}
.loginWindow {
margin:0 auto;
width:675px;
margin-top:172px;
margin-bottom:115px;
height:300px;
}
Here's the jsfiddle: https://jsfiddle.net/grem28/uj5zbhf7/
Remove height of parent if you want that it can to grow or change it to min-height
well, use overflow:visible; instead of overflow:hidden;
Change your height to 100% and remove the overflow, or change it to visible. Here's the CSS with overflow commented out.
.main {
background: linear-gradient(to bottom right, #152d47, #467ba7);
width:100%;
height:100%;
padding-top:8px;
/* overflow: visible; */
}
Here's the updated jsfiddle: https://jsfiddle.net/uj5zbhf7/4/
I have a fixed with container, lets say 1120px. Inside this container, i have a left sidebar which is 400px, and i need a right sidebar which is expanding from the container and touching the right side of the screen. Here is an image explaining the layout i want:
This is the progress i made so far: http://jsfiddle.net/UvxK8/
#wrapper {
background:#f0f0f0;
margin:0 auto;
width:400px;
overflow:hidden;
}
#wrapper .left {
width:100px;
float:left;
height:600px;
background:#333;
}
#wrapper .right {
position:absolute;
margin-left:100px;
height: 650px;
background: green;
min-width:100%;
}
Obviously its not good, because the right sidebar is too wide and a horizontal scrollbar appears.
The image you've used doesn't match your desicription of what you want; I think maybe you're looking at this the wrong way. If the right sidebar spills beyond the container, what's the point of the fixed width container at all?
From your image, it looks like what you want is...
HTML
<div id="header"><h1>Content here.</h1></div>
<div id="container">
<div id="container-left">
<p>Content here.</p>
</div>
<div id="container-right">
<p>Content here.</p>
</div>
</div>
CSS
#header {width:1120px;}
#container {width:100%; min-width:100%;}
#container-left {width:400px; float:left; }
#container-right {width:100%; min-width:100%;}
This will create the image illustration you've used. jFiddle here: http://jsfiddle.net/4JNX2/
Add position relative to your wrapper. try this
HTML
<div id="wrapper">
<div id="left">
</div>
<div id="right">
</div>
</div>
CSS
#wrapper
{width:1120px;
background:#096;
margin:0 auto;
position:relative;
}
#wrapper #left {
width:10%;
float:left;
height:600px;
background:#333;
}
#wrapper #right {
position:absolute;
margin-left:10%;
height: 650px;
background: green;
min-width:95%;
}
I have a parent DIV with 3 children DIVs. I need to float left one DIV, float right another DIV, and center the 3rd DIV.
The parent width is 100% so not fixed.
I tried the following but the DIV is not centered:
<html>
<head></head>
<body>
<div style="width:100%;border:1px solid #000000;height:200px;">
<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:20px;float:left"></div>
<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
left:auto;margin-right:auto;float:left;"></div>
<div style="width:50px;height:50px;border:1px solid #000000;margin-top:75px;margin-
right:20px;float:right;"></div>
</div>
</body>
</html>
I created a fiddle for you to test: http://jsfiddle.net/swS5x/
Thanks
Well, one of the solutions could be to simply add for the #parent add text-align:center; and on #center, remove the float:left; and add display:inline-block;
#parent {
width:100%;
border:1px solid #000000;
height:200px;
text-align:center;
}
#center {
width:50px;
height:50px;
border:1px solid #000000;
margin-top:75px;
margin-right:auto;
margin-left:auto;
display:inline-block;
}
The display:inline-block; makes the element behave much like an image would, which you can center inside a container.
http://jsfiddle.net/swS5x/2/
If you can, reorder your div elements and don't float the #center
See example
<div id="parent">
<div id="left"></div>
<div id="right"></div>
<div id="center"></div>
</div>
A floated element will ignore margin: auto for the left and right margins.
I have 3 divs vertically. The first should have 100% width, the second should have an image with width 283px, and third div should have 100% width.
Does anyone know how to position the image div in the middle of two others divs 100%?
I've tried this, but dont works for me
<div class="content">
<div class="first">1</div>
<div class="third">3</div>
<div class="second">2</div>
</div>
.first{
width:100%;
float:left;
background:yellow;
}
.third{
width:100%
float:right;
background:pink;
}
.second{
width:283px;
overflow:hidden;
background:blue;
}enter code here
If your intention is to position the divs next to each other horizontally than you can't have any of them set to a width of 100% as the total of all elements next to each other can only total 100%.
If your website will be fixed width than your easiest solution would be to set the width of the left and right div in pixels to the (width of the site - 283) / 2. Then they would float next to each other. You could also do this with %.
However if your site is fluid width, then you would need to work out a percentage for all 3 divs i.e 33% each but this would mean the middle won't be exactly 283px.
The only way I can think to make this work exactly as you want would be to use Javascript to resize the elements after the page load which could then get the browser dimensions and work it all out.
Having read it a few times i think i get what you want to do.
You want he middle div to be centred between the two other divs.
you need to give the div a class something like this:
.middlediv
{
width: 283px;
margin-left: auto;
margin-right: auto;
}
which can also be written like this:
.middlediv
{
width: 283px;
margin: 0px auto;
}
Your question isn't clear, so I've done both possible interpretations: http://jsfiddle.net/EbBzY/
HTML
<h1>Option 1</h1>
<div class="main">
<div class="content">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
</div>
<h1>Option 2</h1>
<div class="content">
<div class="first">1</div>
<div class="second">2</div>
<div class="third">3</div>
</div>
CSS
.main{
display:table;
width:100%;
margin-bottom:100px;
}
.main .content{
display:table-row;
}
.main .content div{
display:table-cell;
}
.first{
background:yellow;
}
.third{
background:pink;
}
.second{
background:blue;
width:283px;
margin:auto;
}
I want use three div to create a round effect,like
<div class="wrapper">
<div class="left-corner"></div>
<div class="center-repeat"></div>
<div class="right-corner"></div>
</div>
the .left-corner and .right-corner have a only corner background image
css:
.wrapper
{
width:100%
height:110px;
}
.left-corner
{
background:...
width:110px;
height:110px;
float:left
}
.right-corner
{
background:...
width:110px;
height:110px;
float:right
}
but how should I render the middle div
I tried use width:100% but the corner div will be push and become another row
how can I set the three div in a line and look normal?
If your wrapper is set in percentages, then I would think it best to keep it's children in percentages as well, perhaps use a 33%, 33% and 34% to get the 100%. For the middle, or center-repeat I think you may need to use float: left as well, so it snugs up to the left-corner.
Have you tried using border-radius property?
You can just use the center div and border radius any other corner.
https://developer.mozilla.org/en/CSS/border-radius
Support for "border-radius" in IE
<div class="wrapper">
... content inside wrapper ...
</div>
.wrapper
{
width: 100%;
height: 110px;
border-radius: 5px;
}
Hi i thing you should this
Css
.wrapper
{
width:100%
height:110px;
overflow:hidden;
border:solid 5px black;
border-radius:25px;
}
.left-corner
{
background:red;
width:110px;
height:110px;
float:left
}
.right-corner
{
background:green;
width:110px;
height:110px;
float:right
}
.center-corner{
width:100%;
background:yellow;
height:110px;
}
HTML
<div class="wrapper">
<div class="left-corner">Left</div>
<div class="right-corner">Right</div>
<div class="center-corner">Center</div>
</div>
Live demo http://jsfiddle.net/pTxrW/
Here's my try: jsfiddle.
Left and right corners are 10px less height than center block so it's easier to see borders between them.