#content
{
background-color: red;
text-align: center;
}
#content div
{
float: left;
background-color: green;
padding: 10px;
margin: 10px;
}
<div id="content">
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
<div>AAAAA</div>
</div>
<div style="clear: both;"></div>
http://jsfiddle.net/nTLny/
here the usual code. I want to achieve the following:
so the aligned div goes center.
Text-align center will work if you use display:inline-block instead of using float
JSfiddle
CSs
#content div
{
display: inline-block;
background-color: green;
padding: 10px;
margin: 10px;
}
#content div
{
float: none;
display:inline-block;
background-color: green;
padding: 10px;
margin: 10px;
}
Try it...
#content div {
background-color: #008000;
display: inline-block;
margin: 10px;
padding: 10px;
}
your css:
#content{
background-color:white ;
text-align: center;
width:300px; /*giving it a width so it actually adjust to your sample image 300px seems to be close to yours*/
}
#content div
{
display: inline-block; /*second adjustment you need as "Abhineet" has mentioned*/
background-color: green;
padding: 10px;
margin: 10px;
}
#bottom {
float:right;
}
Related
I'm trying to force a div to fit the text inside. No matter what I have tried, there seems to be extra white space. Here is my code:
body {
background-color: #000;
}
.holding {
width: 500px;
background-color: red;
height: 500px;
padding: 40px 100px;
max-width: 400px;
width: fit-content;
}
.childone {
background-color: white;
display: inline;
padding: 20px;
float: left;
clear: both;
}
.clear {
clear: both;
}
.childtwo {
background-color: white;
display: inline-block;
float: left;
padding: 10px;
}
<body>
<div class="holding">
<div class="childone">This is the Title and I really the div to end here with.no.extra.white.space </div>
<div class="clear"></div>
<div class="childtwo">This is the next child div with a bund of stuff.</div>
</div>
</body>
Use word-break: break-all, like:
.childone {
word-break: break-all;
}
Have a look at the snippet below:
body {
background-color: #000;
}
.holding {
width: 500px;
background-color: red;
height: 500px;
padding: 40px 100px;
max-width: 400px;
width: fit-content;
}
.childone {
background-color: white;
display: inline;
padding: 20px;
float: left;
clear: both;
word-break: break-all;
}
.clear {
clear: both;
}
.childtwo {
background-color: white;
display: inline-block;
float: left;
padding: 10px;
}
<body>
<div class="holding">
<div class="childone">This is the Title and I really the div to end here with.no.extra.white.space </div>
<div class="clear"></div>
<div class="childtwo">This is the next child div with a bund of stuff.</div>
</div>
</body>
Hope this helps!
div { width: max-content; }
Support browsers: https://caniuse.com/#search=max-content
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/max-width
Or you can use this way (change display attribute):
div { display: table; }
I have a div element (1200px width) that contains 3 inner divs.
First and last ones have static sizes (150px and 200px). I want the second one to be centered between logo and buttons. The problem is I don't know how to center this div...
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
width: auto;
float: left;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
One approach would be to set the display of the .text element to inline-block (and remove float: left), then add text-align: center to the parent element in order to center it. Since the other elements are floated, text-align won't affect them, and it will only center the inline .text element.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
text-align: center;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
display: inline-block;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Alternatively, you could also add margin: auto to the .text element and then set display: flex on the parent element. In doing so, the .text element will be centered horizontally with equal space on each side. In doing so, you don't need to float the elements either (since they are flexbox items).
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display: flex;
}
.logo {
width: 150px;
height: 50px;
background-color: darkred;
}
.text {
margin: auto;
}
.buttons {
width: 200px;
height: 70px;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
The problem is that you're floating the centre column. Don't.
The proper way to do what you're doing is to put the left and right columns first, then the centre column won't have to float and you can simply use text-align.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
text-align:center;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="buttons"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
</div>
Try
.text {
width: auto;
float: left;
text-align: center;
}
Trivial with Flexbox:
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display:flex;
justify-content:space-between;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
background:#c0ffee
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Here's an (I think) more appropriate solution which centers the entire div and not only the text, using width:calc(100% - 350px);
https://jsfiddle.net/tyvfcbre/1/
.text {
display:inline-block;
width:calc(100% - 350px);
background:lightgrey;
}
Background is there to demonstrate the div position.
For most of you this will be a simple question but I'm new to css. My problem is that I have two blocks next to each other with float but text in second object just does not stay in same line. How do I get everything in same line?
What it should look like:
blocks
In reality everything works fine until "Text2" comes or I try to adjust "Logo" padding, then "Text2" moves to next line something like this.
Also how do I get "Text2" next to "Logo"? Right now I only got it working with float:right but I need it closer to the logo. And do I use aside for these elements? Thanks.
Adding js fiddle url for demo: http://www.jsfiddle.net/08rhr7wx/
HTML:
<aside>
<div class="wrapper">
<div class="block1">
<h2>Text1</h2>
</div>
<div class="block2"><img src="img/logo.jpg"></div>
<h2>Text2</h2>
</div>
</aside>
CSS:
.wrapper {
overflow: hidden;
}
.wrapper div {
height: 55px;
margin-top: 20px;
}
.wrapper .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 555px;
}
.wrapper .block1 h2 {
padding-left: 20px;
padding-top: 13px;
}
.wrapper .block2 {
float: left;
width: 325px;
background: #e26c34;
padding-left: 20px;
}
.wrapper .block2 h2 {
float: right;
padding-right: 20px;
}
I moved your "text2" inside the block2 where I guess you want it.
Also, when setting up fixed width like you have, you need to set a min-width on the wrapper to keep those floats in 1 line.
To make the "text2" stay next to your logo, I changed it to display: inline instead of its default display: block.
Note: What you really should try, is to re-structure your code making it more responsive.
.wrapper {
min-width: 1000px;
overflow: hidden;
}
.wrapper div {
height: 55px;
margin-top: 20px;
}
.wrapper .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 555px;
}
.wrapper .block1 h2 {
padding-left: 20px;
}
.wrapper .block2 {
float: left;
width: 325px;
background: #e26c34;
padding-left: 20px;
}
.wrapper .block2 h2 {
display: inline
}
<aside>
<div class="wrapper">
<div class="block1">
<h2>Text1</h2>
</div>
<div class="block2">
<img src="img/logo.jpg">
<h2>Text2</h2>
</div>
</div>
</aside>
As requested, a second sample where some restructure has been made.
.wrapper {
min-width: 1000px;
overflow: hidden;
}
.wrapper div {
height: 55px;
margin-top: 20px;
}
.wrapper .block1 {
float: left;
margin-left: 20px;
background: #390b5d;
width: 555px;
line-height: 55px;
}
.wrapper .block1 span {
font-size: 24px;
padding-left: 20px;
color: white;
}
.wrapper .block2 {
float: left;
width: 325px;
background: #e26c34;
padding-left: 20px;
line-height: 55px;
vertical-align: middle;
}
.wrapper .block2 span {
font-size: 24px;
padding-left: 20px;
vertical-align: middle;
display: inline-block;
}
.wrapper .block2 img {
vertical-align: middle;
display: inline-block;
}
<aside>
<div class="wrapper">
<div class="block1">
<span>Text1</span>
</div>
<div class="block2">
<img src="http://lorempixel.com/30/30/technics/5/"><span>Text2</span>
</div>
</div>
</aside>
Try adding h2 tag inside .block2
<div class="block2"><img src="img/logo.jpg"><h2>Text2</h2></div>
Ref: jsfiddle.net/08rhr7wx/1/
For some reason, I can't seem to center this list element in the page. It contains three equally-sized boxes, and I'd like them to always stick to the center.
body {
width: 100%;
}
.boxes {
display: block;
margin: 0 auto;
}
.box-container {
display: block;
margin: 0 auto;
border: 1px solid blue;
}
.all {
float: right;
width: 100px;
height: 100px;
background: red;
margin: 10px 10px 10px 10px;
}
.clear {
clear: both;
}
<body>
<div class="box-container">
<div class="box1 all"></div>
<div class="box2 all"></div>
<div class="box3 all"></div>
<div class="clear"></div>
</div>
</body>
For margin: auto to work, your elements need to have a width given to them somehow (usually through width). The usual solution to make things scale automatically is display: inline-block; (though flexbox makes this much easier when supported):
.box-container {
display: inline-block;
text-align: left;
}
Then you’d give its parent text-align: center;. Alternatively, width: 300px; (with perhaps a minor adjustment or removal of spaces) seems like it could work well here; it depends on your actual layout.
body doesn’t need width: 100%;, by the way.
For everything you want to center horizontally, you should set its margin-left and margin-right to 'auto'.
Give your box container a width:
CSS
.box-container {
display: block;
margin: 0px auto;
width: 360px;
border: 1px solid blue;
}
Example here: http://jsfiddle.net/82WCU/
Remove the float: right from each the all class. That is causing the boxes to move to the right. Make the box-container center aligned (this will bring them to the center), and change the display of each box to inline-block.
.box-container {
display: block;
margin: 0 auto;
border: 1px solid blue;
text-align: center;
}
.all {
width: 100px;
height: 100px;
background: red;
margin: 10px 10px 10px 10px;
display: inline-block;
}
Try:
.box-container {
text-align:center;
}
.all {
display:inline-block;
}
NOTE:
inline-block leaves white-space between elements. To remove this space, write elements on same line rather than writing them on separate lines.
Change:
to
<div class="box-container">
<div class="box1 all"></div><div class="box2 all"></div><div class="box3 all"></div>
</div>
DEMO here.
Try This it work perfectly:
HTML
<body>
<div class="box-container">
<div class="box1 all"></div>
<div class="box2 all"></div>
<div class="box3 all"></div>
<div class="clear"></div>
</div>
</body>
css
body {
width: 100%;
}
.boxes {
display: block;
margin: 0 auto;
}
.box-container {
display: block;
margin: 0 auto;
border: 1px solid blue;
}
.all {
background: none repeat scroll 0 0 red;
float: right;
height: 100px;
margin-right: 13%;
width: 100px;
}
.clear {
clear: both;
}
How could I remove this extra space middle of "Top content" and "Left content" ?
I want Left and Right to the same level.
I don't want to lose equal margin for all these blocks.
STATIC IMAGE
HTML
<div class="top">Top content</div>
<div class="left">Left content</div>
<div class="right">Right content</div>
CSS
.top
{
margin: 3%;
background: red;
}
.left
{
margin: 3%;
float: left;
width: 50%;
background: yellow;
}
.right
{
margin: 3%;
overflow: hidden;
background: green;
}
LIVE DEMO
http://jsfiddle.net/yF6MX/20/
BEST SOLUTION SO FAR
http://jsfiddle.net/yF6MX/14/
If we could use same margin with Top content, then this solution would be perfect.
This seems to be what you want:
.top
{
border: 1px solid #ccc;
background: red;
margin-left:10px;
margin-right:10px;
}
.left
{
float: left;
width: 50%;
background: yellow;
margin: 10px;
}
.right
{
background: green;
margin: 10px;
overflow: hidden;
}
You were doing great, but with you "margin:10px" in .top, you were adding a margin on your left block, just do margin on left and right
You could try removing the margin-top from your left and right elements.
margin: 0 10px 10px 10px;
http://jsfiddle.net/yF6MX/5/
use this
UPDATE http://jsfiddle.net/yF6MX/15/
.top
{
border: 1px solid #ccc;
background: red;
margin: 10px;
margin-bottom: 0px;
}
.left
{
float: left;
width: 47%;
background: yellow;
margin: 2%;
}
.right
{
background: green;
margin: 2% 2% 2% 0;
overflow: hidden;
float: right;
width: 47%;
}
I would personally add a container with padding all around it:
<div class="container">
<div class="top">Top content</div>
<div class="left">Left content</div>
<div class="right">Right content</div>
</div>
Then remove the other margin properties and stick a margin-bottom on .top and margin-right on .left, and also add the new .container CSS:
.container {
padding: 10px;
}
.top {
border: 1px solid #ccc;
background: red;
margin-bottom: 10px;
}
.left {
float: left;
width: 50%;
background: #FF0;
margin-right: 10px;
}
.right {
background: green;
overflow: hidden;
}
DEMO
Hope this helps.