I am trying to make a mini grid post layout using css. But i have a problem with divs. I have try it in this demo page. And I do not get the shape I want. I want to make it like the screenshot
I try it like this CSS codes:
.div {
position:relative;
float:left;
width:100%;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background-color:#1d1f20;
}
.div:nth-child(1){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(2){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(3){
width:400px;
padding-top:400px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(4){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(5){
width:365px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(6){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
HTML
<div class="container">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
How can i get the screenshot within css ? Anyone can help me here ?
You can use a lot of solutions:
Solution one:
Use the new column-count. DEMO.
Check the browser compatibility.
Solution two:
Use display:inline-block;. DEMO.
Check the browser compatibility.
Solution three:
Using flexbox. DEMO.
Check the browser compatibility.
Solution four:
Use JQuery, I suggest you the Masonry plugin (usually used for galleries) . DEMO.
I am not sure if this is what you are looking for, i had to restructure your html to achive that here is the link:http://codepen.io/saa93/pen/ENjNgy
<style>
body,html {
padding:0px;
margin:0px;
width:100%;
height:100%;
}
.container {
position:relative;
width:100%;
max-width:1010px;
min-height:400px;
margin:0px auto;
}
.div {
position:relative;
float:left;
width:100%;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
background-color:#1d1f20;
}
.div:nth-child(1) {
background: transparent none repeat scroll 0 0;
float: left;
width: 370px;
}
.div:nth-child(3){
width:180px;
float:left;
}
.div:nth-child(1) > .div:nth-child(1){
background-color:#1d1f20;
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(1) > .div:nth-child(2){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(1) > .div:nth-child(3) {
margin-bottom: 5px;
margin-right: 5px;
padding-top: 185px;
width: 365px;
}
.div:nth-child(2) {
margin-bottom: 5px;
margin-right: 5px;
padding-top: 370px;
width: 400px;
}
.div:nth-child(3) > .div:nth-child(1){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
.div:nth-child(3) {
float: left;
width: 180px;
}
.div:nth-child(3) > .div:nth-child(2){
width:180px;
padding-top:180px;
margin-right:5px;
margin-bottom:5px;
}
</style>
<div class="container">
<div class="div">
<div class="div"></div>
<div class="div"></div>
<div class="div"></div>
</div>
<div class="div"></div>
<div class="div">
<div class="div"></div>
<div class="div"></div>
</div>
</div>
I hope this helps :)
Related
I've created the following UI components which serve as a legend:
http://codepen.io/ac123/pen/peKgjP
<div id="MapKeys">
<div id="RegionalSupply">
<div class="header">Regional supply</div>
<div class="circle"></div>
<div class="spacer"></div>
<div class="detail">Circles sized by the amount of change from the previous period</div>
</div>
<div id="CorridorNetFlowDirection">
<div class="header">Corridor net flow direction</div>
<div class="dottedLine1">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
</div>
<div class="spacer"></div>
<div class="detail">Lines sized by the amount of change in net flow from the previous period</div>
<div class="separator"></div>
<div class="dottedLine2">
<div class="part1"></div>
<div class="part2"></div>
<div class="part3"></div>
</div>
<div class="spacer"></div>
<div class="detail">Change in flow direction</div>
</div>
</div>
</div>
#MapKeys
{
text-align:left;
height:200px;
width:260px;
display:inline-block;
vertical-align:top;
.header{
font-size:16px;
padding-bottom:6px;
}
#RegionalSupply{
border:solid lightgrey 1px;
padding:10px;
display:inline-block;
& > .circle {
vertical-align:top;
width: 14px;
height: 14px;
background: lightgrey;
position:relative;
top:2px;
display:inline-block;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
& > .spacer {
width:5px;
display:inline-block;
}
& > .detail{
width:175px;
font-size:12px;
display:inline-block;
}
}
#CorridorNetFlowDirection{
border:solid lightgrey 1px;
padding:10px;
vertical-align:top;
display:inline-block;
& > .dottedLine1
{
font-size: 0px;
position:relative;
top:4px;
height:10px;
display:inline-block;
vertical-align:top;
& > .part1{
width: 14px;
background: lightgrey;
display:inline-block;
height:10px;
}
& > .part2{
width: 3px;
background: none;
display:inline-block;
height:10px;
}
& > .part3{
width: 14px;
background: lightgrey;
display:inline-block;
height:10px;
}
}
& > .separator
{
height:1px;
}
& > .dottedLine2
{
font-size: 0px;
position:relative;
/*top:4px;*/
display:inline-block;
& > .part1{
width: 14px;
background: #077CAB;
display: inline-block;
height:10px;
}
& > .part2{
width: 3px;
background: none;
display: inline-block;
height:10px;
}
& > .part3{
width: 14px;
background: #077CAB;
display: inline-block;
height:10px;
}
}
& > .spacer {
width:5px;
display:inline-block;
}
& > .detail{
width:150px;
font-size:12px;
display:inline-block;
}
}
}
I was expecting these divs to display side-by-side b/c the parent divs and child divs are all defined with display:inline-block. How could I update my code to make these UI components display with the same with and height similar to this?:
https://www.dropbox.com/s/dhhkcx4dvczyjgx/updated-map-key.png?dl=0
They child divs of MapKeys are display in inline-block..It is just that width you set on MapKeys (width:260px;)that is causing the second child element to break to another line
To illustrate adjust the width of MapKeys to 2600px codepen here
because the parent element has the same width as child items.
#MapKeys
{
text-align:left;
height:600px; /*Increase it so that div can be side by side.*/
width:260px;
}
If you go to Google Play Store Website,you will notice that the width of the SearchBar at the top changes if you change the window width.
Can someone please give me an example on how I can achieve such variable width behaviour using just HTML and CSS?
CSS
body {
margin:0;
min-width:960px;
}
#upperbar {
background-color:#F1F1F1;
white-space:nowrap;
height:60px;
width:100%;
}
#logobardiv {
margin:10px 20px 10px 30px;
display:inline-block;
}
#logo {
height:39px;
width:183px;
}
#searchbardiv {
font-size:0;
display:inline-block;
height:100%;
padding-left:10px;
vertical-align:middle;
white-space:nowrap;
min-width:200px;
}
#searchbar {
height:28px;
/*max-width:589px;*/
max-width:100%;
width:589px;
min-width:545px;
font-size:16px;
border:1px solid #A8A8A8;
border-right:none;
display:inline-block;
vertical-align:middle;
}
#searchbar:hover {
border:1px solid black;
border-right:none;
}
::-webkit-input-placeholder {
color:#A9A9A9;
padding:0 0 0 7px;
}
#searchbutton {
vertical-align:middle;
background:#4584F0;
height:28px;
width:60px;
display:inline-block;
border:1px solid transparent;
border-top-right-radius:2px;
border-bottom-right-radius:2px;
padding:0;
margin:0;
outline:none;
white-space:nowrap;
}
#searchbuttonimg {
vertical-align:middle;
background:url(images/search.png) no-repeat center;
display:inline-block;
height:100%;
width:26px;
}
#signindiv {
display:inline-block;
height:100%;
white-space:nowrap;
vertical-align:middle;
}
#appsimg {
display:inline-block;
vertical-align:middle;
}
HTML
<body>
<div class="container">
<div id="upperbar">
<div id="logobardiv">
<img id="logo" src="https://www.gstatic.com/android/market_images/web/play_logo_x2.png" />
</div>
<div id="searchbardiv">
<input id="searchbar" type="text" placeholder="Search" />
<button id="searchbutton"> <span id="searchbuttonimg"></span>
</button>
</div>
<div id="signindiv">
<img id="appsimg" src="images/apps.png" />
</div>
</div>
</div>
JSFiddle
simple way is you need to set a 3 different width max-width, min-widtht and actual width
like
input{
max-width:100%;
min-width:300px;
width:800px;
}
I used display:flex to achieve the variable length of the elements.
Refer the below link for a good explanation
FlexBox
I've never had this problem before, but for some reason my container here won't auto wrap the text when I use overflow.
The entire document is here: http://codepen.io/Peechiee/pen/RNMRLy?editors=110
But here's just the part I'm referring to:
.top-friend-statuses
{
float:right;
background-color:#eeeeee;
width:33%;
height:auto;
margin-top:1%;
padding:1%;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.top-friend-status-image
{
height:100px;
width:100px;
float:left;
margin-left:2%;
}
.top-friend-status-post
{
height:110px;
width:100%;
background-color:DARKGREY;
margin-top:1%;
margin-bottom:1%;
padding-top:1.6%;
padding-bottom:1%;
}
.top-friend-status-input
{
float:left;
height:100px;
width:53%;
overflow-x:hidden;
overflow-y:auto;
background-color:LIGHTGREEN;
font-size:9pt;
}
.top-friend-status-add-message
{
display:inline-block;
background-color:RED;
height:30px;
width:30px;
font-size:8pt;
overflow:hidden;
margin-top:0%;
margin-left:3%;
float:right;
}
.top-friend-status-mood
{
background-color:VIOLET;
height:auto ;
width:30%;
float:left;
font-size:9pt;
}
And here's the HTML
<div class="top-friend-statuses">
<div class="top-friend-status-post">
<img src="http://placehold.it/100x100" class="top-friend-status-image">
<div class="top-friend-status-input">
fll;dkgj;lkdgkldhjdgkldlgkdj;gk;djlkgdj;gjldkj;ksd;slgkj;ldkg
</div>
<div class="top-friend-status-add-message">
DERP
</div>
</div>
</div>
I've tried looking up different solutions but none of them are similar to the problem I'm facing with this. Please help D:
Add a word-break: break-word; to your top-friend-status-input class
so your .top-friend-status-input class would look like this:
.top-friend-status-input
{
word-wrap: break-word;
float:left;
height:100px;
width:53%;
overflow-x:hidden;
overflow-y:auto;
background-color:LIGHTGREEN;
font-size:9pt;
}
I want to position an input element inside a div , but for some reason the input element is overflowing the div. What is the issue?
http://jsfiddle.net/aklintsevich/p1o584wg/
html:
<section class="full" id="third">
<div id="contact">
<form action="#" method="post" id="form">
<div class="email_info top white_border icomoon">
<div id="name_font" class="icon center_text">
</div>
<div>
<input type="text" name="firstname">
</div>
</div>
<div class="email_info bottom white_border icomoon">
<div id="email_font" class="icon center_text">
</div>
<div >
<input type="text" name="firstname">
</div>
</div>
</form>
</div>
</section>
css:
#third{
background-color:#22AFA0;
}
#contact{
background-color:blue;
margin:0px auto 30px auto;
position:relative;
top:30%;
width:65%;
height:30%;
background-color:red;
}
.email_info{
height:40%;
width:45%;
position:absolute;
background-color:green;
}
.message{
position:absolute;
right:0px;
height:100%;
width:45%;
background-color:green;
}
#message_icon{
height:40%;
width:20%;
background-color:blue;
border-right:1px solid white;
border-bottom:1px solid white;
}
#message_icon:before{
color:white;
display:block;
width:100%;
height:100%;
text-align:center;
line-height:80px;
font-size:2.5em;
content:"\e610";
}
.text_position{
float:right;
position:absolute;
}
.top{
top:0px;
}
.bottom{
bottom:0px;
}
#form_button{
position:relative;
width:65%;
height:20%;
/*background-color:orange;*/
}
.icon{
width:20%;
height:100%;
background-color:blue;
border-right:1px solid white;
}
.icomoon{
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
-webkit-font-smoothing: antialiased;
}
.white_border{
border:2px solid white;
}
.center_text{
text-align:center;
}
#name_font:before{
font-size:2.5em;
display:block;
width:100%;
height:100%;
line-height:80px;
color:white;
content:"\e611";
}
#email_font:before{
font-size:2.5em;
display:block;
width:100%;
height:100%;
line-height:80px;
color:white;
content:"\e60f";
}
set the attribute 'overflow' to 'auto' in relevant div s. as an example,
.email_info{
overflow : auto;
}
Divs have a default display of block,therefore, to have two divs to be able to line up on the same line you have to declare them as inline-block.
.email_info{
display:inline-block;
}
I am trying to have my child elements be vertically centered on their parent elements. Something is wrong with my css code but I can't tell what it is:
css:
#parent_div_1, #parent_div_2, #parent_div_3{
width:90%;
height:20%;
margin-right:10px;
border:2px solid #a1a1a1;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
padding-bottom: 5%;
background:#dddddd;
border-radius:25px;
vertical-align:middle;
margin:4px;
}
.child_div_1{
float:left;
margin-right:5px;
border-radius: 2px;
border:2px solid #a1a1a1;
background:#dddddd;
vertical-align:middle;
}
html:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<div id='parent_div_1'>
<div class ='child_div_1'>asd</div>
<div class ='child_div_1'>asd</div>
</div>
<div id='parent_div_2'>
<div class ='child_div_1'>asd</div>
<div class ='child_div_1'>asd</div>
</div>
<div id='parent_div_3'>
<div class ='child_div_1'>asd</div>
<div class ='child_div_1'>asd</div>
</div>
link to my JSFiddle: http://jsfiddle.net/wasingej/Y4FA5/
A quick solution is to set
display: table; for #parent_div_1, #parent_div_2, #parent_div_3
and
display: table-cell; for .child_div_1
Add display: inline-block to the parent div style.
#parent_div_1, #parent_div_2, #parent_div_3{
...
vertical-align:middle;
display: inline-block;
...
}
JSFiddle: http://jsfiddle.net/9Y7Cm/5/
Add Display:inline-block; to your css on #parent_div_1, #parent_div_2, #parent_div_3:
CSS
#parent_div_1, #parent_div_2, #parent_div_3{
width:90%;
height:20%;
margin-right:10px;
border:2px solid #a1a1a1;
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
padding-bottom: 5%;
background:#dddddd;
border-radius:25px;
vertical-align:middle;
margin:4px;
display:inline-block; /* ADDED CSS */
}
.child_div_1{
float:left;
margin-right:5px;
border-radius: 2px;
border:2px solid #a1a1a1;
background:#dddddd;
vertical-align:middle;
}
DEMO HERE: http://jsfiddle.net/Y4FA5/21/
<style>
body{
padding: 0;
margin: 0;
margin:0px auto;
}
#main{
position: relative;
width:500px;
height:500px;
}
#abc{
text-align:center;
background-color:#0F0;
height:250px;
display: table;
width: 100%;
}
#abc span {
vertical-align:middle;
display: table-cell;
}
</style>
<div id="main">
<div id="abc">
<span>asdfasdfafasdfasdf<br/> sdfjdsl flkjdsflk sjdflkjdsf </span>
</div>
</div>