Can somebody please help me with this piece of code?
HTML:
<div id="container">
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
</div>
CSS:
#container {
margin:auto;
text-align:center;
padding:10%;
}
.block {
width:240px;
height:300px;
background: red;
display:inline-block;
}
jsfiddle
I want it so that the whole container aligned in the middle but when there is an extra block at the bottom, it should go to the left. Is that possible?
This works:
HTML:
#container {
margin:auto;
text-align:center;
width:70px;
overflow:hidden;}
CSS:
.block {
width:24px;
height:30px;
float:left;
margin:5px 5px;
background: red;}
See the jsfiddle here. I changed the sizes so that it's easier to see but you can readjust them according to your site. Basically, you need overflow:hidden; and set the width of the container so that it can only fit 2 blocks per row so that the next block goes underneath and is aligned to the left. Also, remember that ids must be unique in your page; if you need more than one element with the same definition then you must use classes.
I would use float: left in block id,remove container from css and use class instead of id because id must be used once:
HTML:
<div>
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
<div class="block"> </div>
</div>
CSS:
.block {
width:40%;
height:300px;
margin: 5%;
float: left;
background: red;
display:block;
}
Try this plugin for jQuery to help you organize the DIV.
desGridLayout:
http://des.delestesoft.com:8080/?go=8
I solved my own problem with #media queries :
#media screen and (max-width: 840px) {
.portfolio_container {
width:512px;
}
}
#media screen and (max-width: 580px) {
.portfolio_container {
width:255px;
}
}
I know media queries are not compatible with older browser versions! but at least it is supported by all most recent versions!
Related
If we inspect the code,you will see that the div.header has height: 0px;
Look at image below:
I want my div to be the size of three elements .c1,.c2 and.c3`
How can I solve this problem?
I hope as well that we managed to explain my problem.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
</div>
</div>
CSS:
.container
{
width:100%;
height:500px;
background:red;
}
.c1
{
width:auto;
height:auto;
background:yellow;
}
.c2
{
width:auto;
height:auto;
background:gray;
}
.c3
{
width:auto;
height:auto;
background:orange;
}
.c1,.c2,.c3{width:33%;float:left;}
.header{width:70%;height:auto;margin:0 auto;background:blue;}
JSFiddle
Add overflow: auto(for example) css property to your .header class to recognize it's children's height.
JSFiddle
Use clearing divs.
HTML:
<div class="container">
<div class="header">
<div class="c1">asdsadsadsadasda</div>
<div class="c2">asdasdas</div>
<div class="c3">sadsada</div>
<div class='clearing'></div>
</div>
</div>
CSS:
.clearing {clear:both;}
I'm trying to work out the best way using CSS to keep Block 2 centred in the remaining space that exists to the right of Block 1. This space could increase or decrease with the size of the browser window / orientation of device. Block1's position does not move.
I was hoping to be able to use a combination of float, margin-left:auto and margin-right:auto as way of keep Block2 centred, however, sadly my CSS is still in it's infancy.
Any guidance / help would be greatly appreciated.
#block1 {
position:relative;
top:10px;
left:0px;
width:50px;
height:100px;
background-color:#009;
}
#block2 {
position:relative;
width:100px;
height:100px;
top:10px;
float:right;
margin-left:auto;
margin-right:auto;
background-color:#999;
}
<div id="block1"></div>
<div id="block2"></div>
http://jsfiddle.net/d4agp0h6/
Thanks in advance
An easier way to do this would be to use nested divs rather than trying to position two within the same block element.
Here's the updated jsFiddle
So, you create a wrapper (#block1) which is the size of the entire page so you can move stuff around inside. Position each subsequent piece of content within this area so you can set margins, position, etc.
HTML
<div id="block1">
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</div>
Then, with your CSS, set the positions relative to one another so you can use margins and percentage spacing to keep things fluid.
CSS
#block1 {
position:relative;
top:10px;
left:0px;
width:200px;
height:400px;
background:#555;
}
#block2 {
position:relative;
width:75%;
height:100%;
float:right;
margin:0 auto;
background-color:#999;
}
#content {
margin:0 auto;
border:1px solid black;
position:relative;
top:45%;
}
#content p {
text-align:center;
}
It appears you want a fixed side bar and a fluid content area.
DEMO: http://jsfiddle.net/fem4uf6c/1/
CSS:
body, html {padding:0;margin:0;}
#side {
width: 50px;
background-color: red;
box-sizing: border-box;
float: left;
height: 500px;
position: relative;
z-index: 1;
}
.content {
position: relative;
box-sizing: border-box;
width: 100%;
padding: 20px 20px 20px 70px;
text-align: center;
}
#box2 {
width: 50%;
height: 300px;
background: purple;
margin: 0 auto;
}
HTML:
<div id="side"></div>
<div class="content">
<p>This is the content box. Text inside here centers. Block items need margin: 0 auto; inline and inline-blocks will auto center.</p>
<div id="box2"></div>
</div>
Here is my take on a solution. I used Brian Bennett's fiddle as a base, since I agreed with how he laid out the markup and was going to do something similar myself.
Link to JSFiddle
Where I differed is to add a container section:
<section id='container'>
<div id="block1"></div>
<div id="block2">
<div id="content">
<p>This is some text</p>
</div>
</div>
</section>
I also used percentages to determine widths instead of px values - with the exception of #container. Changing the width of the container should demonstrate that the relevant content is always centered.
Option 1
Here is one of the correct way of putting Block side by side... where one Block is on the Top Left... and the other Block is Top Center
Working Demo 1 : http://jsfiddle.net/wjtnddy5/
HTML
<div id="mainBlock">
<div id="block1">
<div class="box"></div>
</div>
<div id="block2">
<div class="box"></div>
</div>
</div>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
#mainBlock {
height:98%;
width:98.9%;
border:5px solid #000;
}
#block1 {
width:10%;
height:100px;
display:inline-block;
border:1px solid #ff0000;
overflow:hidden;
}
#block2 {
width:89.2%;
height:100px;
margin-left:auto;
margin-right:auto;
border:1px solid #ff0000;
display:inline-block;
}
.box {
margin:0 auto;
background-color:#009;
width:100px;
height:100px;
}
Its using the "display:inline-block;" to put Blocks side by side which is better than using Float technique... let me know incase you need only Float!
Option 2
Here is the Other technique using "float: left" incase you need this only...
For this I have just replaced "display:inline-block" with "float: left" for both Blocks.... rest is same..
Working Demo 2 : http://jsfiddle.net/h78poh52/
Hope this will help!!!
I try to build a layout with 2 floating DIV´s on higher resolution and without floating on small resolution. One (subnavigation) with a fixed width and one (content) with a max-width.
here is an example code of the HTML:
<div id="subnavigation">
lorem ipsum...
</div>
<div id="content">
lorem ipsum...
</div>
and here the CSS:
#subnavigation {
float:right;
width:320px;
}
#content {
max-width:730px;
}
#media only screen and ( max-width:800px ) {
#subnavigation, #content {
float:none;
width:auto;
}
}
My problem now is that I need the subnavigation below the content without the float. Have someone an idea?
I tried a little bit with the calc() in CSS to get a fixed width for the content (to be able to float that), but it doesn't really work on my android-phone.
You could possibly use some negative margin sorcery.
Heres one way to approach it (probably a bit overcomplicated)
HTML
<div class="page">
<div class="content-wrapper">
<div class="content">
..content..
</div>
</div>
<div class="sidebar">
..content..
</div>
</div>
CSS
.page {
width:1050px; /*320px + 730px*/
max-width:100%;
margin:0 auto;
background:grey;
}
.content-wrapper {
float:left;
width:100%;
}
.content {
margin-right:320px;
background:orange;
}
.sidebar {
float:left;
width:320px;
margin-left:-320px;
background:green;
}
#media (max-width:480px) {
.content-wrapper {
float:none;
width:auto;
margin-bottom:20px;
}
.content {
margin-right:0;
}
.sidebar {
float:none;
margin:0;
width:auto;
}
}
Fiddle: http://jsfiddle.net/Varinder/vV4LT/
http://jsfiddle.net/TomasRR/WuNL3/1/
Code works perfectly when there is no p's and h's in the divs. Once I put some text everything goes out of order.
<div class="cont">
<div class="left">
</div>
<div class="right">
</div>
</div> <!-- .cont -->
css
body {
width:100%;
margin:0;
padding:0;
}
.cont {
white-space:nowrap;
width:100%;
}
.left {
border:1px solid red;
width:50%;
height:200px;
display: inline-block;
}
.right {
border:1px solid black;
width:50%;
height:200px;
display: inline-block;
}
#media only screen and (max-width: 800px) {
.left, .right {
width: 400px;
}
}
when the text is added with p's and h's the html looks like that
<div class="cont">
<div class="left">
<h1>Programming and fuss</h1>
<h2><em>by Tomas R. </em></h2>
<p>MY TOP 3 PAGES:</p>
<a href="http://www.twitter.com/" target="_blank" title="it is twitter" />TWITTER</a>
WIKIPEDIA
VICE
</div>
<div class="right">
<p>"An ounce of practice is generally worth more than a ton of theory." <span>E. F. Schumacher.</span></p
</div>
It's better to look at fiddle... What I want ? I want blocks to stay in one line kind of, not to drop down.
Add vertical-align: top; to your .left style
Previously, I was using <table> to split up my page layout into 3 parts, the left sidebar, right sidebar & the main centre panel. Now, after having learnt the disadvantages of overusing/misusing <table>, I want to avoid using tables for this purpose & I am looking to style these 3 divs in such a way that they look like 3 columns of a <table> row.
Any inputs on how I can achieve the 3 divs in same row, would be highly appreciated.
Currently my all the three div s are shown in linearized fashion, one after another.
Maybe something easier, what about:
HTML:
<div id="main">
<div>content</div>
<div>content</div>
<div>content</div>
</div>
CSS:
#main{
margin: 0 auto 0 auto;
width: 960px; /*just an example*/
}
#main div{
float: left;
width: 320px; /* a third of the main width*/
}
I hope this will help you.
Typically sidebars have fixed width and the middel content area takes up the rest of the space. Considering that, here's the best approach:
<style>
#left {
width:200px;
float:left;
} #right {
width:200px;
float:right;
} #main {
margin:0px 200px;
}
</style>
<div id="container">
<div id="left">content</div>
<div id="right">content</div>
<div id="main">content</div>
</div>
Resize the window and all is well.
Working JSFIDDLE: http://jsfiddle.net/7ayqe/
Give them "float:left" properties and corresponding width to make it the size you want.
Example (I know these are inline styles, used for demonstration purposes only):
<div id="left-sidebar" style="width:30%;float:left"><!--Left Sidebar--></div>
<div id="content" style="width:50%;float:left"><!--Content--></div>
<div id="right-sidebar" style="width:20%;float:left"><!--Right Sidebar--></div>
Something like this should get you started:
<div>
<div class="column">column one</div>
<div class="column">column two</div>
<div class="column">column three</div>
<div class="last"></div>
</div>
.column { float: left; padding: 5px }
.last { clear: left}
Here is a live example
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<div class="clear"></div>
CSS:
.col1 {
float:left;
width:250px;
}
.col2 {
float:left;
width:600px;
}
.col3 {
float:left;
width:20px;
}
.clear {
clear:both;
}