I often do the width hack 49% and border 1px to do seperator for 2 column. It worked, just like the below demo. But is there any better way of doing it? I want to avoid this 49% hack, because when the viewport shrink to a larger or smaller size, it's obvious and the design will break.
body{
margin:0;
}
.left {
background: #eee;
float: left;
width: 49%;
border-right:1px solid #333;
}
.right {
background: #eee;
float: right;
width: 50%;
}
img {
margin: 0 auto;
display: block;
width: 44px;
padding: 5px 0;
}
<div class="navigate" style="width: 170px;">
<div class="left">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
</div>
<div class="right">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
</div>
</div>
You can use box-sizing
CSS
body {
margin:0;
}
.left {
background: #eee;
float: left;
width: 50%;
border-right:1px solid #333;
box-sizing:border-box;
}
.right {
background: #eee;
float: right;
width: 50%;
}
img {
margin: 0 auto;
display: block;
width: 44px;
padding: 5px 0;
}
HTML
<div class="navigate" style="width: 170px;">
<div class="left">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/previous_arrow_point_flat-128.png">
</div>
<div class="right">
<img src="https://cdn0.iconfinder.com/data/icons/arrow-set/512/next_arrow_point_flat-128.png">
</div>
</div>
DEMO HERE
Related
My css and html looks like below. mRow is the main div and within that is my mRowLeft and mRowRight.
However instead of left and right I see them appear top left and bottom right.
div.mRow {
padding: 2px 25px 2px 0;
margin-top: 4px;
margin-bottom: 3px;
float: left;
text-align:left;
width: 350px;
/*border:1px solid green;*/
}
.mRowLeft {
padding: 2px 25px 2px 0;
margin-top: 4px;
margin-bottom: 3px;
float: left;
text-align:left;
width: 48%;
/*border:1px solid green;*/
}
.mRowRight {
padding: 2px 25px 2px 0;
margin-top: 4px;
margin-bottom: 3px;
float: right;
text-align:left;
width: 48%;
/*border:1px solid green;*/
}
///....
<div class="mRow">
<div class="mRowLeft"></div> --label
<div class="mRowLeft"></div> --10rows
<div class="mRowRight"></div> --label
<div class="mRowRight"></div> --10rows
</div>
...//
You should be putting your label and content under the same left/right div.
<div class="mRow">
<div class="mRowLeft">
<div>--label</div>
<div>10rows</div>
</div>
<div class="mRowRight">
<div>label</div>
<div>10rows</div>
</div>
</div>
Then you can either use inline-blocks:
.mRow {
white-space: nowrap;
width: 350px;
}
.mRowLeft,
.mRowRight {
display: inline-block;
white-space: normal;
width: 50%;
}
or use flexbox:
.mRow {
display: flex;
flex-direction: row;
width: 350px;
}
.mRowLeft,
.mRowRight {
width: 50%;
}
.mRow
{
display:flex;
justify-content:space-around;
}
<div class="mRow">
<div class="mRowLeft">
dfsf
<div class="mRowLeft">sdfvs</div>
</div>
<div class="mRowRight">
sdfs
<div class="mRowRight">sdfsd</div>
</div>
</div>
I need to give vertical height for the right element with full background. I tried by setting
height:100%;
max-height: 100%
but the element takes only content height
.full_container {
height: 350px;
border: 1px solid #ddd;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
<div class="full_container">
<div class="clearfix">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
</div>
Try giving the .clearfix class a display:flex and height:100%
.clearfix {
display: flex;
height: 100%;
}
Example below
.full_container {
height: 350px;
border: 1px solid #ddd;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
.clearfix {
display: flex;
height: 100%;
}
<div class="full_container">
<div class="clearfix">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
</div>
See this:
I have added display: flex for .full_container
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.full_container {
height: 350px;
border: 1px solid #ddd;
display: flex;
}
.pull-left {
float: left;
}
.width50 {
width: 50%;
}
.inline_height {
color: #fff;
padding: 10px;
background: #333;
}
.height100 {
padding: 10px;
height: 100%;
max-height: 100%;
background: #e8e8e8;
}
<div class="full_container">
<div class="pull-left width50">
<div class="inline_height">
Content height only
</div>
</div>
<div class="pull-left width50">
<div class="height100">
<div>I need to show this div element height to 100%</div>
</div>
</div>
</div>
I don't think the title is a good one but I don't know how to say it in a better way.
I have 3 divs representing an image, user info, user experience.
Due to mobile responsiveness experience must come last, but with the code below the experience div doesn't touch the top.
.one{
width: 40%;
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two{
width: 40%;
height: 70px;
padding: 5px;
background-color: #0ff;
float: left;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
<div class="four">
<div class="one">1 image</div>
<div class="two">2 info</div>
<div class="three">3 experience</div>
</div>
How it should look like:
You can wrap the left hand side in a separate div and float that left.
.left {
float: left;
width: 40%;
}
.one {
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two {
height: 70px;
padding: 5px;
background-color: #0ff;
}
.three {
width: 58%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
}
.four {
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
<div class="four">
<div class="left">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
An alternative approach using flexbox:
.left {
min-width: 40%;
}
.one {
height: 50px;
padding: 5px;
background-color: #0f0;
}
.two {
height: 70px;
padding: 5px;
background-color: #0ff;
}
.three {
flex: 1;
height: 100px;
padding: 5px;
background-color: #f00;
}
.four {
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
display: flex;
}
<div class="four">
<div class="left">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
Your 1st div(image) has a margin to the right so 3rd div(experience) won't fit in. So at first you have to wrap the 1st two div's into a container like the example below
<div class="four">
<div class = "container">
<div class="one">1 image</div>
<div class="two">2 info</div>
</div>
<div class="three">3 experience</div>
</div>
After that you will need to inline the container and set the width of container to 40% and first two div's to 100% like the CSS below.
.one{
width: 100%;
height: 50px;
padding: 5px;
background-color: #0f0;
}
.container {
display:inline-block;
width:40%;
}
.two{
width: 100%;
height: 70px;
padding: 5px;
background-color: #0ff;
float: left;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
vertical-align: text-top;
background-color: #f00;
float: right;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
float: left;
}
Here's it on Codepen and Jsfiddle
Wrap div's one and two in a div that sets the width and floats left, then float div three to the right.
Make div class one and two to 100% width so they fill the left div completely, and set the left div to the width you wanted.
HTML:
<div class="four">
<div class="left">
<div class="one">
1 image
</div>
<div class="two">
2 info
</div>
</div>
<div class="three">
3 experience
</div>
</div>
CSS:
.one{
height: 50px;
padding: 5px;
background-color: #0f0;
display: block;
}
.two{
height: 70px;
padding: 5px;
background-color: #0ff;
display: block;
}
.three{
width: 56%;
height: 100px;
padding: 5px;
background-color: #f00;
float: right;
display: inline-block;
}
.left {
float: left;
display: block;
width: 42%;
}
.four{
width: 500px;
padding: 5px;
margin: 5px;
background-color: #ff0;
display: block;
float: left;
}
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>
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/