Hi I'm trying to center 3 divs inside of a div.
.outer {
border: 1px solid blue;
width: 80%;
}
.inner {
border: 1px solid red;
float: left;
width: 20px;
height: 20px;
margin-left: 20px;
}
.clear {
clear: both;
}
<div class="outer">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<div class="clear"></div>
</div>
Can someone help on this.
Thanks.
If you want to achieve this just:
HTML:
<div class="outer">
<div style="display: inline-block;">
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
</div>
</div>
CSS:
.outer{
border: 1px solid blue;
width: 80%;
text-align: center;
}
.inner:first-of-type{
margin-left: 0px;
}
.inner{
border: 1px solid red;
width: 20px;
height: 20px;
margin-left: 20px;
float: left;
}
Related
I'm trying to place 6 divs with different height on 3 columns.
I use float property for divs on the left and on the right and margin: 0 auto for central divs.
Using clear property I placed second row of divs under the first one, but I want each div is under the div with the same float option without blank space between them.
Instead they are aligned the lowest div.
Here's the fiddle: fiddle
div {
border: 1px solid red;
width: 30%;
}
.left {
float: left;
height: 200px;
}
.right {
float: right;
height: 100px;
}
.center {
margin: 0 auto;
height: 50px;
}
<div class="left">left-top</div>
<div class="right">right-top</div>
<div class="left" style="clear:left">left-bottom</div>
<div class="right" style="clear:right">right-bottom</div>
<div class="center">center-top</div>
<div class="center">center-bottom</div>
Thanks for help,
Piero.
You can try this one.
Html Code
<div class="left">left-top</div>
<div class="right">right-top</div>
<div class="left">left-bottom</div>
<div class="clearfix"></div>
<div class="right">right-bottom</div>
<div class="center">center-top</div>
<div class="center">center-bottom</div>
Css Code
.left, .right, .center {border: 1px solid red;width: 30%;margin:2px;}
.clearfix{clear:both;}
.left {float:left;}
.right { float:left;}
.center {float:left;}
check fiddle https://jsfiddle.net/Dhavalr/9cyq8tu9/
Put them in 3 columns/DIVs 33.33% wide which you float:
https://jsfiddle.net/8Lbc5pq7/4/
HTML:
<div class="column">
<div class="left">left-top</div>
<div class="left">left-bottom</div>
</div>
<div class="column">
<div class="center">center-top</div>
<div class="center">center-bottom</div>
</div>
<div class="column">
<div class="right">right-top</div>
<div class="right" style="clear:right">right-bottom</div>
</div>
CSS:
div {
border: 1px solid red;
width: 95%;
}
.column {
float: left;
border: none;
width: 33.33%;
}
.left {
float: left;
height: 200px;
}
.right {
float: right;
height: 100px;
}
.center {
margin: 0 auto;
height: 50px;
}
try using this style:
div {
border: 1px solid red;
width: 30%;
display:inline-block;
}
.left {
float: left;
height: 200px;
}
.center {
margin: 0 auto;
height: 50px;
}
Please try this code
<style>
div {
border: 1px solid gray;
width: 33.1%;
}
.left {
float: left;
height: 200px;
}
.right {
float: left;
height: 100px;
}
.center {
margin: 0 auto;
float:left;
height: 50px;
}
</style>
<div class="left">left-top</div>
<div class="center">center-top</div>
<div class="right">right-top</div>
<div style="clear:both;"></div>
<div class="left" style="clear:left;">left-bottom</div>
<div class="center">center-bottom</div>
<div class="right" style="clear:right;">right-bottom</div>
Have a structure:
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
How can I make div3 floating left to div2, and then make a left shift on div2?
Try This:
#div1 {
float: left;
width: 200px;
height: 30px;
border: 5px solid #ccc;
margin: 5px;
padding: 2px;
text-align: center;
}
#div2 {
float: right;
width: 80px;
text-align: center;
border: 5px solid #000;
}
#div3 {
float: left;
width: 200px;
height: 30px;
border: 5px solid red;
margin: 5px;
padding: 2px;
text-align: center;
}
<div id="div1">
div 1
<div id="div2">div 2</div>
</div>
<div id="div3">div 3</div>
Here is jsfiddle : https://jsfiddle.net/nmsptskp/
Use display:inline-block on all 3 div & float:right on div2
#div1 {
border: 1px solid #f00;
height: 20px;
width: 100px;
display:inline-block;
}
#div2 {
float: right;
border: 1px solid #0f0;
height: 20px;
width: 50px;
display:inline-block;
}
#div3 {
border: 1px solid #00f;
height: 20px;
width: 50px;
display:inline-block;
}
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
My answer is using flexbox css
.container{
display: flex;
}
#div1{
flex-grow: 1;
border:5px solid #ccc;
text-align:center;
display: flex;
justify-content: space-between;
flex-direction: col;
}
#div2{
width: 50%;
text-align:center;
border:5px solid #000;
self-
}
#div3{
flex-grow: 1;
border:5px solid red;
text-align:center;
}
<div class="container">
<div id="div1">
div 1
<div id="div2"> div 2</div>
</div>
<div id="div3"> div 3</div>
</div>
Use float left and right
<style>
#div1{width:300px;height:50px;background:green;margin:10px;float:left;}
#div2{width:100px;height:50px;background:red;float:right;opacity:0.7}
#div3{width:100px;height:50px;background:yellow;margin:10px;float:left;}
</style>
<div id="div1">
<div id="div2"></div>
</div>
<div id="div3"></div>
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is.
Like this: http://s7.postimg.org/tvmmw91jf/theboxes.png
Fiddle: http://jsfiddle.net/NightSpark/1L5027qr/
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
Update: I put in a clearer illustration above than the one I had at first.
The easiest thing you could do to center the elements is using CSS Flexbox.
Here's the HTML :
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
</div>
Here's the CSS :
#footer {
display: flex;
flex-direction: row;
justify-content: space-between;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
}
Here's a Fiddle : http://jsfiddle.net/1L5027qr/1/
You can create a 25% width around each div.
<div id="footer">
<div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox1">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox2">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox3">
</div>
</div><div style="width:25%;display:inline-block;text-align:center;">
<div id="fbox4">
</div>
</div>
</div>
If you are able to modify the mark-up a little:
<div id="footer">
<div id="fbox1" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox2" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox3" class="outer">
<div class="inner">...</div>
</div>
<div id="fbox4" class="outer">
<div class="inner">...</div>
</div>
<div>
CSS:
#footer {
width: 100%;
clear:both;
}
#footer .outer {
width: calc(100% / 4 - 4px);
text-align: center;
display: inline-block;
margin: 0px;
border: 0px;
}
#footer .inner {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
display: inline-block;
}
Fiddle: http://jsfiddle.net/simbunch/wcvb88yg/
How to I align text to the right side of the image icon like the one in the example picture.
I would usually use "float:left" but it's for a mobile responsive design so I prefer not using things like "float:left" because it ruins the red divs height with responsive designs.
I have to align the title, subsitle and a little square image.
It is easy to use float: left and NOT break the height of red border div.
You only have to add display: table-cell to the .app_top block. Here's the solution:
.app_top {
display: table-cell;
}
.app_top img {
float: left;
}
See the working example. Here's the code.
You could use display: inline-block instead.
#main-container {
border: 5px solid #3F3F3F;
width: 270px;
}
.container {
width: 250px;
height: 200px;
border: 5px solid #7F0008;
margin: 5px;
}
.box {
display: inline-block;
vertical-align: top;
width: 85px;
height: 85px;
background: #446C74;
margin: 5px;
}
.content {
display: inline-block;
vertical-align: top;
}
.title, .sub-title {
margin: 0;
padding: 3px 10px 3px 0;
}
.title {
font-size: 17px;
font-weight: bold;
}
.sub-title {
font-weight: bold;
color: #3F3F3F;
}
.img {
background: url(http://placehold.it/100/25);
width: 100px;
height: 25px;
border: 5px solid #EBEAAE;
}
<div id="main-container">
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
<div class="container">
<div class="box">
</div>
<div class="content">
<p class="title">Title</p>
<p class="sub-title">Sub-Title</p>
<div class="img"></div>
</div>
</div>
</div>
Maybe another option is to put the attribute in a parent div instead of the element
html:
<div id="wrapper">
<div class="twoColumn">
<img src="https://pbs.twimg.com/profile_images/444650714287972352/OXTvMFPl.png" />
</div>
<div class="twoColumn">
<p> this is a testingalot test</p>
<button> mybutton </button>
</div>
</div
css:
#wrapper{
border: 1px solid black;
}
.twoColumn{
width: 49%;
float:left;
border: 1px solid red;
}
button{
width: 50px;
height: 40px;
background: red;
}
img{
max-width: 100%;
}
http://jsfiddle.net/Equero/df2wvcet/
I hope it's help
Most simple solution would be to change your markup structure by wrapping your spans in a div just the way you did with the image, then add .app_top div{display:inline-block} .app_top div span{display:block}
.top{
width: 95%;
position: fixed;
background-color: #f7f7f7;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 3%;
padding-right: 3%;
border-bottom: 1px solid #b2b2b2;
}
.search{
width: 100%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: none;
background-color: #e3e3e6;
}
.search::-moz-focus-inner {
border: 0;
padding: 0;
}
.items{
background-color: #ffffff;
width: 100%;
padding-top: 50px;
}
.app{
margin-left: 25px;
margin-right: 25px;
}
.app_top div{display:inline-block}
.app_top div span{display:block}
<div class="main">
<div class="top" >
<input type="text" class="search" />
</div>
<!-- Items -->
<div class="items" style="border: 1px solid black; padding-top: ">
<div class="app" style="border: 1px solid red;" >
<div class="app_top">
<div>
<img src="_img1.jpg" width="95"/>
</div>
<div>
<span class="app_txt" style="border: 1px solid aqua;"> text text - House text house! Las...</span>
<span class="ltd" style="border: 1px solid pink;"> textic-texttive ltd</span>
<span class="" style="border: 1px solid blue;"> </span>
</div>
</div>
<div class="app_bottom">
</div>
</div>
</div>
.content contains all text in right side. If you use overflow:hidden the height of div will stay normal.
img { float:left; }
.content { overflow:hidden; }
I'm making a DIV table but the last two rows which contain colums don't show a border.
Does somebody know a workarround?
Here is my code:
CSS
.contentwrap { width: 300px; display: table; }
.contentwrap .box-row {display: table-row;}
.contentwrap .box { padding: 15px; display: table-cell; border: 1px solid #e5e5e5; }
.contentwrap .box-column { display: table-row; }
.contentwrap .column { padding: 15px; display: table-cell; width: 10%; border-color: #e5e5e5; }
HTML
<div class="contentwrap">
<div class="box-row">
<div class="box">row 1</div>
</div>
<div class="box-row">
<div class="box">row 2</div>
</div>
<div class="box-row">
<div class="box">rpw 3</div>
</div>
<div class="box-row">
<div class="box">row 4</div>
</div>
<div class="box-row">
<div class="box-column">
<div class="col">column1</div>
<div class="col">column2</div>
<div class="col">column3</div>
<div class="col">column4</div>
</div>
<div class="box-column">
<div class="col">column1</div>
<div class="col">column2</div>
<div class="col">column3</div>
<div class="col">column4</div>
</div>
</div>
</div>
I'm not sure if this is the effect you want, but I just changed
border-color: #e5e5e5; in .contentwrap .column to border: 1px solid #e5e5e5;
Like this
.contentwrap .col
{
padding: 15px;
display: table-cell;
width: 10%;
border: 1px solid #e5e5e5
}
Also you might want to check your namings, in your html you are using col but your css is using column. I changed it to col for you here.
From what I can understand, the following modifications to your CSS should do the trick.
.box-column { display: table-row; }
.col{ padding: 15px; display: table-cell; width: 10%; border-color: #e5e5e5; border: 1px solid #e5e5e5; }