can you please help me with some css magic.
I am trying to achieve a flixable multi column layout. something like this http://masonry.desandro.com/demos/basic-multi-column.html can I achive this with Blueprint and no javascript.
the thing with blueprint now is that is added lots of white space (see attachment)
Following is just sample one.. You just change width/height according to your requirement. Hope this helps.
CSS
----
.content {
float: left;
display: block;
width: 1000px;
background: red;
}
.sub-content {
float:left;
width: 200px;
background: blue;
margin: 10px;
}
Sample HTML
-----------
<div class="content">
<div class="sub-content" style="width: 500px; height: 300px;">
DIV 1
</div>
<div class="sub-content" style="width: 200px; height: 100px;">
DIV 2
</div>
<div class="sub-content" style="width: 500px; height: 300px;">
DIV 3
</div>
<div class="sub-content" style="width: 250px; height: 300px;">
DIV 4
</div>
</div>
Related
I am trying to make part of my responsive page look like: http://s17.postimg.org/k4bh7qxnj/Screen_Shot_2014_07_26_at_8_08_02_PM.png
I have tried a few things and I got the result found at this jsfiddle: http://jsfiddle.net/TachionFiddle/4HkTS/3/
This is my code:
<div id="my-wrapper" style="
max-width: 941px;
display: inline-block;
width: auto;
height: auto;">
<div class="left-stuff" style="
display:inline-block;
width: 18%;">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png" style="width: auto;
height: auto; max-width:50%;">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png" style="width: auto;
height: auto; max-width: 50%;">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png" style="width: auto;
height: auto; max-width: 50%;">
</div>
<div class="right-stuff" style="display:inline-block;max-width: 75%">
<img src="http://s17.postimg.org/gns7jkwkf/webbanner2.png" style="width: auto; height: auto;
max-width:100%;">
</div>
</div>
Here's the general idea:
<div class="wrapper">
<div class="col-10">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png">
<img alt="" src="http://s16.postimg.org/db3hs4ndt/sac_history.png">
</div>
<div class="col-90">
<img src="http://s17.postimg.org/gns7jkwkf/webbanner2.png">
</div>
</div>
.wrapper {
width: 100%;
}
.col-10 {
width: 10%;
float: left;
vertical-align: top;
}
.col-10 img {
display: block;
max-width: 100%;
width: 100%;
}
.col-90 {
width: 90%;
float: left;
}
.col-90 img {
max-width: 100%;
width: 100%;
}
DEMO
I would suggest putting the three blocks into one image and making the heights line up in photoshop, will make your life a lot easier.
I get an unwanted margin between block1 and block2 with display: inline-block style. See this jsFiddle.
HTML
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div>
<div id="block2">
block2
</div>
</div>
</div>
CSS
* {
margin: 0px;
padding: 0px;
}
#container {
background-color: #f00;
width: 100%;
height: 200px;
}
#innercontainer {
background-color: #0f0;
width: 200px;
height: 200px;
margin: 0px auto;
}
#block1, #block2 {
display: inline-block;
background-color: #00f;
height: 200px;
}
The margin disappears when I change the HTML to this:
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div><div id="block2">
block2
</div>
</div>
</div>
or this:
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div><!--
--><div id="block2">
block2
</div>
</div>
</div>
While I prefer the latter, I still do wonder if anyone knows a solution so I can use the original HTML, but no whitespace shows up in innercontainer. Also note that I want to avoid setting float: left; on both block1 and block2 or making them floating by position: absolute|relative because that generates other problems in my layout. Any ideas?
EDIT
Ok, so I had more trouble with my layout. When I added an image to block1, the whole block moved down, very strange (see jsFiddle). I am now using float: left and will have to figure out how I can add a div that consumes the free-space on the right.
Update this part of css :
#block1, #block2 {
display: block;
float: left;
background-color: #00f;
height: 200px;
}
When you are inline, spaces take space!
EDIT :
To be safe change this part of HTML
<div id="container">
<div id="innercontainer">
<div id="block1">
block1
</div>
<div id="block2">
block2
</div>
<div style="clear: both"></div>
</div>
If you want to use display: inline-block;. You need to close gap between tags like you mention. Because The it self are treated as inline-elements also. When you have a space or line-break between two tags would create a gap between them.
You can fix this by set font-size of a surrounding container to 0 and set them back in child node.
#innercontainer {
background-color: #0f0;
width: 200px;
height: 200px;
margin: 0px auto;
font-size: 0px;
}
#block1, #block2 {
display: inline-block;
background-color: #00f;
height: 200px;
font-size: 15px;
}
http://jsfiddle.net/SbUwt/27/
How to display the image as vertical align in div container?
The image "setting.png" placed in last column in the code i attached. please advice solution please.
.table{
width: 100%;
margin: 20px 0px 20px 0px;
background-color: #EEEEEE;
}
.tableRow{
width: 100%;
clear: both;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #cccccc;
}
.tableCol{
float: left;
height: 40px;
line-height: 40px;
}
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
Just add (space before a link)
<div class="table">
<div class="tableRow">
<div class="tableCol" style="width:10%; text-align:center;">1</div>
<div class="tableCol" style="width:40%">Michael</div>
<div class="tableCol" style="width:40%">webexp#gmail.com</div>
<div class="tableCol" style="width:10%;">
<a href="" ><img src="images/icons/setting.png" alt="Setting" align="absmiddle" /></a>
</div>
</div>
</div>
better solution:
add this to css:
img {
margin-top:10px;
}
Here, this should work:
Add this to your div which contains the image that should be centered.
display:table-cell;
vertical-align:middle;
This should center the image vertically no matter the dimensions of your div or the image that it contains.
You can do this with position: absolute; if you know the dimensions of the settings.png image (20px x 20px for this example).
Add class tableColSettings to the <a> around the settings image. Then add CSS;
.tableColSettings{
position: absolute;
display: block;
top: 50%;
left: 50%;
margin: -10px 0 0 -10px; /* Half image dimensions */
width: 20px;
height: 20px;
line-height: 0;
}
.tableColSettings img{
width: 100%;
}
The settings image will always stay in the center of the element, no matter the height. Here's a working fiddle: http://jsfiddle.net/384pa/
Hope this helps!
Css is having a tag name
"vertical-align" may be you will get your solution
How to create web page using CSS and div to create 4 split screen?
HTML would look like this:
<div class="box">
Area 1
</div>
<div class="box">
Area 2
</div>
<div class="box">
Area 3
</div>
<div class="box">
Area 4
</div>
CSS would look like this:
html, body {
width: 100%;
height: 100%;
}
.box {
float: left;
width: 50%;
height: 50%;
}
Here's a Fiddle to play with: http://jsfiddle.net/UMKWU/
<div class="one" style="float: left; width: 50%; height: 50%;">
</div>
<div class="two" style="float: left; width: 50%; height: 50%;">
</div>
<div class="three" style="float: left; width: 50%; height: 50%;">
</div>
<div class="four" style="float: left; width: 50%; height: 50%;">
</div>
I'm not allowed to comment on questions, otherwise I would just add a comment on first answer by Jordan. His answer is correct, but when you add border, you need to account for the border width, in that case, just add to your css: border-width:1%; and change the width:49%;
height: 49%;.
That should do the trick, here is a link to Fiddle: http://jsfiddle.net/UMKWU/3/
Hi you can do as like this
Css
html, body {
width: 100%;
height: 100%;
}
.box1, .box2, .box3, .box4 {
float: left;
width:49%;
height: 49%;
border-style: solid;
border-width:1%;
}
.box3{
clear:left;
}
HTML
<div class="box1">
Area 1
</div>
<div class="box2">
Area 2
</div>
<div class="box3">
Area 3
</div>
<div class="box4">
Area 4
</div>
Live demo here http://jsfiddle.net/rohitazad/UMKWU/8/
I'm trying to create the following layout for my website:
<table width="80%" align="center">
<tr>
<td width="80%" bgcolor="red">MAIN CONTENT</td>
<td bgcolor="green">SIDEBAR</td>
</tr>
</table>
As you would imagine this will create a table that is 80% of the page width and the content area is 80% of that width, while the sidebar fills the rest.
But this time I want to use DIVs or SPANs or basically a TABLEless design. Now, I know I can use two DIVs and use their "float" properties to achieve this but I was hoping to see if there is something more simple and more logical like this:
<div align="center" style="width:80%">
<span style="width:80%;">
MAIN CONTENT
</span>
<span>
SIDEBAR
</span>
</div>
Unfortunately the above does not work at all and I don't know why. Can someone please show me the purest HTML implementation for it which does not use "float"?
Every site I see on the internet nowadays has at least one sidebar so I'm hoping your answer to this will help a lot of people besides me. Thanks!
You can do this without using floats by using proper markup and display: table;, display: table-cell; with CSS.
HTML:
<div id="wrap">
<div id="sidebar">
I am a sidebar!
</div>
<div id="mainContent">
I am some main content
</div>
</div>
CSS:
#wrap
{
width: 100%;
height: 400px;
display: table;
}
#sidebar
{
display: table-cell;
border: 1px dashed #f00;
}
#mainContent
{
display: table-cell;
width: 80%;
border: 1px dashed #0f0;
}
But beware, IE7 and lower do not support this CSS.
http://jsfiddle.net/57Fvk/
Using almost the same markup (one extra div) you can use floats to create the desired layout also:
HTML
<div id="wrap">
<div id="sidebar">
I am a sidebar!
</div>
<div id="mainContent">
I am some main content
</div>
<div class="clear"> </div>
</div>
CSS:
#wrap
{
width: 100%;
height: 400px;
}
#sidebar
{
width: 20%;
float: left;
background: #f00;
height: 100%;
}
#mainContent
{
width: 80%;
float: left;
background: #0f0;
height: 100%;
}
.clear
{
clear: both;
}
http://jsfiddle.net/shzLc/
Here's a very simple way to create this layout:
http://jsfiddle.net/e94zc/
HTML:
<div id="page">
<div id="content">
Content
</div>
<div id="sidebar">
Sidebar
</div>
</div>
CSS:
#page{
margin: 0 auto;
width:80%;
position: relative;
}
#content{
width:80%;
position: absolute;
top: 0;
}
#sidebar{
position: absolute;
top: 0;
left: 80%;
width: 20%;
}