Im trying to position the website like that:
-------------------
{ }{ }{ }
{ }{ }{ }
-----{ }-----
{ }{ }{ }
{ }{ }{ }
-------------------
Any ideas? tried float left and right but respective columns keep wrapping to the center making me unable to put the center div there.
Left and right columns are have leftcolumn and rightcolumn class
My code:
left column:
div.aside.gauche div.section.colonne.categories {
height:460px;
width:210px;
border-style:solid;
margin-top:16px;
border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em;
float:left;
}
div.aside.gauche div.section.colonne.commentaires {
height:85px;
width:210px;
border-style:solid;
margin-top:6px;
border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em;
float:left;
}
div.aside.gauche div.section.colonne.magasins {
height:321px;
width:210px;
border-style:solid;
margin-top:6px;
border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em;
float:left;
}
right column:
div.aside.droite div.section.colonne.recherche {
height:460px;
width:170px;
border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em;
float:right;
}
div.aside.droite div.section.colonne.suivez {
height:460px;
width:170px;
border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em;
float:right;
}
div.aside.droite div.section.colonne.partenaires {
height:460px;
width:170px;
border: 1px solid black; -moz-border-radius: 0.3em 0.3em 0.3em;
float:right;
}
center piece
div.milieu {
float:left;
display:block;
}
Make sure all the column divs are using:
display:inline-block;
Here is a solution to your question:
http://jsfiddle.net/uZx4L/3/
If all your divs will have specific heights and widths, you can use position:absolute for all your divs and specify where they go exactly.
<div id='left_top'>
...
</div>
<div id='left_middle'>
...
</div>
<div id='left_bottom'>
...
</div>
<div id='center'>
...
</div>
<div id='right_top'>
...
</div>
<div id='right_middle'>
...
</div>
<div id='right_bottom'>
...
</div>
Then with your css as such:
div#left_top {
position:absolute;
top:0px;
left:0px;
width:210px;
height:460px;
background-color:red;
}
div#left_middle {
position:absolute;
top:460px;
left:0px;
width:210px;
height:85px;
background-color:yellow;
}
div#left_bottom {
position:absolute;
top:545px;
left:0px;
width:210px;
height:321px;
background-color:blue;
}
div#center {
position:absolute;
top:0px;
left:210px;
right:170px;
background-color:cyan;
}
div#right_top {
position:absolute;
top:0px;
right:0px;
width:170px;
height:460px;
background-color:magenta;
}
div#right_middle {
position:absolute;
top:460px;
right:0px;
width:170px;
height:460px;
background-color:green;
}
div#right_bottom {
position:absolute;
top:920px;
right:0px;
width:170px;
height:460px;
background-color:purple;
}
I specified background-color for each div so you can see where they are if you want to cut/paste it for a look see. I used the sizes you specified. But you could easily adapt this to have one or more of the divs grow so they're all equal sizes or change depending on the screen size.
Related
http://jsfiddle.net/9877/6E2pQ/2/
What I want do is have columncontent1 on the left and columncontent2 and columncontent3 stacked on the right side. see the jsfiddle. How do I fix the css? I am running out of ideas. Is the error in the css or the way the div placed in the body:
<style type="text/css">
/*<![CDATA[*/
.columncontainer1{
width:1001px;
position:relative;
border:0px;
background-color:#fffffa;
overflow:hidden;
}
.columncontainer2{
float:left;
position:relative;
right:300px;
border-right:1px solid #0a0a0a;
background-color:#f5f5f5;
}
.columncontainer3{
float:left;
position:relative;
bottom: 10px
border-right:1px solid #0a0a0a;
background-color:#f5f5f5;
}
.columncontent1{
float:left;
width:680px;
position:relative;
background-color:#933;
border: 1px;
left:300px;
padding:10px;
overflow:hidden;
}
.columncontent2{
float:left;
width:280px;
position:relative;
background-color:#FFF;
border: 2px;
left:301px;
padding:10px;
overflow:hidden;
}
.columncontent3{
float:left;
width:280px;
position:relative;
left:301px;
border: 4px;
background-color:#CC6;
padding:10px;
overflow:hidden;
}
/*]]>*/
</style>
There's a lot going on there, I've simplified the HTML and CSS:
CSS:
.leftCol {
float: left;
width: 50%;
background-color: #ccc;
height: 60px;
}
.rightColContainer {
float: left;
width: 50%;
}
.rightCol1 {
background-color: #333;
height: 30px;
}
.rightCol2 {
background-color: #777;
height: 30px;
}
HTML:
<body>
<div class="leftCol">columncontent1</div>
<div class="rightColContainer">
<div class="rightCol1">columncontent2</div>
<div class="rightCol2">columncontent3</div>
</div>
</body>
You only need to 'contain' the right hand column to stop the 'stacked column' flowing incorrectly.
CSS3 actually allows you to make several columns automatically without having to have all those classes. Check out this generator: http://www.generatecss.com/css3/multi-column/
This is however only if you are trying to make your content have multiple columns like a newspaper.
I can't display a few DIV's in one line. display: inline-block and float: left doesn't work. My site width is not fixed so I want it to be dynamic to fit any width of screen.
HTML:
<div id="all">
<div id="a">25px</div>
<div id="b">200px</div>
<div id="c">
<div id="c1">100%</div>
<div id="c2">100%</div>
<div id="c3">100%</div>
</div>
500px
</div>
CSS:
DIV {
margin:5px;
font-size:10px;
}
DIV#all {
width:500px;
border:1px dotted black;
}
DIV#a {
display:inline-block;
width:25px;
height:200px;
border:1px solid red;
color:red;
}
DIV#b {
display:inline-block;
width:150px;
height:200px;
border:1px solid green;
color:green;
}
DIV#c {
display:inline-block;
width:auto;
height:200px;
border:1px solid blue;
color:blue;
}
DIV#c1 {
width:auto;
border:1px dotted blue;
color:blue;
}
DIV#c2 {
width:auto;
border:1px dotted blue;
}
DIV#c3 {
width:auto;
border:1px dotted blue;
color:blue;
}
Live Demos:
PROBLEM: http://jsfiddle.net/BC2d9/
RESOLVED: http://jsfiddle.net/RAds3/ (display:table)
The problem with your current attempt is the width: 100%; on the third column div#c. 100% here will be 100% of its parent - which contains all three columns. Depending on what level of flexibility you want you have a few options.
If the site width is fixed, set a fixed width for the third column.
If you want the third column to stretch to its content, set max-width.
If you want the third column to stretch to fill its parent, you're probably better off with (css) tables.
Check out http://somacss.com/cols.html for a great resource on css column layout.
Problem is with third column. You can't set width to 100%. Also, you need float: left;. Here is fixed code:
<div id="all">
<div id="a">25px</div>
<div id="b">200px</div>
<div id="c">
<div id="c1">100%</div>
<div id="c2">100%</div>
<div id="c3">100%</div>
</div>
<div style="clear:both;"></div>
500px
</div>
and CSS:
DIV {
margin:5px;
font-size:10px;
}
DIV#all {
width:500px;
border:1px dotted black;
}
DIV#a {
float: left;
width:25px;
height:200px;
border:1px solid red;
color:red;
}
DIV#b {
float: left;
width:200px;
height:200px;
border:1px solid green;
color:green;
}
DIV#c {
float: left;
width:210px;
min-height:190px;
border:1px solid blue;
color:blue;
padding: 5px;
}
DIV#c1 {
width:100%;
border:1px dotted blue;
color:blue;
margin: 0 0 5px 0;
}
DIV#c2 {
width:100%;
border:1px dotted blue;
margin: 0 0 5px 0;
}
DIV#c3 {
width:100%;
border:1px dotted blue;
color:blue;
margin: 0 0 5px 0;
}
And also LIVE DEMO
If your site width is fixed, then just replace 100% with all remained width in the container.Example: jsFiddle
If you want it to be dynamic and to fit any width of screen, I think it's not possible with pure CSS. I made it with jQuery:
var containerWidth = $('#all').outerWidth();
var widthLeft = $('#a').outerWidth(true) + $('#b').outerWidth(true);
var widthRight = containerWidth - widthLeft - 20; // 20px = spacing between elements
$('#c').css('width', widthRight+ 'px');
$('#c1, #c2, #c3').css('width', widthRight-10+ 'px'); // 10 = padding on the right side
Modified CSS:
DIV#c {
display:inline-block;
height:200px;
border:1px solid blue;
color:blue;
float: right;
}
DIV#c1 {
border:1px dotted blue;
color:blue;
}
DIV#c2 {
border:1px dotted blue;
}
DIV#c3 {
border:1px dotted blue;
color:blue;
}
Removed width: 100% and set float:right to #c.
Live demo: jsFiddle
Check out this update. I hope is good enough :)
DIV {
margin:5px;
font-size:10px;
}
DIV#all {
width:500px;
border:1px dotted black;
}
DIV#a {
display:inline-block;
width:25px;
height:200px;
border:1px solid red;
color:red;
float:left;
}
DIV#b {
display:inline-block;
width:150px;
height:200px;
border:1px solid green;
color:green;
float:left;
}
DIV#c {
display:inline-block;
width:277px;
height:200px;
border:1px solid blue;
padding:0 7px 0 5px;
color:blue;
float:left;
}
DIV#c1 {
width:100%;
margin:5px 0;
border:1px dotted blue;
color:blue;
}
DIV#c2 {
width:100%;
margin:5px 0;
border:1px dotted blue;
}
DIV#c3 {
width:100%;
margin:5px 0;
border:1px dotted blue;
color:blue;
}
div { float:left; width:10px; height:10px; }
Helps?
How can I achieve this view with CSS:
------------------TITLE
or
TITLE------------------
I have
<div id="titleBlock">
<div id="title">Some text</div>
<div id="titleLine"></div>
</div>
And my styles are:
#titleLine {
border-top: 1px solid black;
width: 84%;
clear: both;
height: 20px;
}
#title {
height: 10px;
float: right;
}
My approach is here: jsFiddle
However the line width is defined with percents and I need it adjust automatically with CSS.
This may be what you are after: http://jsfiddle.net/XpSWX/1/
Hope this helps
<div id="titleBlock">
<div id="title">Some text</div>
<div id="titleLine"></div>
</div>
#titleLine {
border-top: 1px solid black;
width: 84%;
float:left;
height: 20px;
margin-top:8px;
}
#title {
height: 10px;
float: right;
}
http://jsfiddle.net/sY2SV/1
<div id="titleBlock">
<div id="title">Some text</div>
<div id="titleLine"></div>
</div>
#titleLine {
border-top: 1px solid black;
width: 84%;
float:right;
height: 20px;
margin-top:8px;
}
#title {
height: 10px;
float: left;
}
http://jsfiddle.net/sY2SV/2
Here is a solution:
#titleBlock {
width:100%;
}
#titleLine {
background:black;
position:absolute;
z-index:1;
left:0px;
top:14px;
width:100%;
height: 1px;
}
#title {
display:inline-block;
padding:4px;
background:white;
position:relative;
z-index:2;
/* Only variable to change... Just say left and it woulb be title------- */
float:right;
}
DEMO
Hey now you can used this
HTML
<div class="hello"><span>Hello i m sony</span></div>
Css
.hello{
background:green;
text-align:left;
position:relative;
}
.hello span{
padding-right:10px;
background:green;
display:inline-block;
position:relative;
z-index:1
}
.hello:after{
content:'';
border-top:solid 5px red;
position:absolute;
right:0;
left:0;
top:7px
}
Live demo
http://tinkerbin.com/1guJzKcI
Check my answer in Horizontal Line in Background using Css3
You can do it with a 1% gradient like this
.datedAside {
background: linear-gradient(0deg, transparent 49%, #000 50%, transparent 51%);
}
.datedAside span{
background: #FFF;
padding: 0 0.5rem;
}
You'll nedd the extra span to be the same background color as the background of the component to make it look like it has "deleted" the line going behind the text.
For text, it's best to use text-align
css
#content2
{
clear:both;
width:1024px;
height:auto;
position:relative;
}
#content2 div:first-child
{
background:#E4ECF7;
width:445px;
height:25px;
margin:15px 0px 0px 223px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #E0DCD1;
padding:5px 0px 0px 5px;
position:absolute;
}
#content2 div:last-child
{
width:1024px;
height:200px;
position:absolute;
border:1px solid #E0DCD1;
clear:both;
}
Html
<div id="content2">
<div>content</div>
<div>content</div>
</div>
Result
div1 is showing inside div2
I need
div1 then
div2
Please help me.
why using position absolute,no need for clear property for last-child
#content2
{
clear:both;
width:1024px;
height:auto;
position:relative;
}
#content2 div:first-child
{
background:#E4ECF7;
width:445px;
height:25px;
margin:15px 0px 0px 223px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
border:1px solid #E0DCD1;
padding:5px 0px 0px 5px;
/*position:absolute;*/
}
#content2 div:last-child
{
width:1024px;
height:200px;
/*position:absolute;*/
border:1px solid #E0DCD1;
/*clear:both;*/
}
div are cleared by default unless after using float property
remove position absolute from both child divs...
If you are using Position: absolute; specify the margin for both div's.
eg:
#content2 div:last-child
{
width:1024px;
height:200px;
position:absolute;
margin-top: xxx; /* specify the top margin */
border:1px solid #E0DCD1;
clear:both;
}
i think you are looking like this :- http://tinkerbin.com/3qRLgscO
Actually you made CSS bit of complicated for yourself.You can get your desired results through very simple CSS without using of positioning.
And if we are using float than we should use the clear for clearing the floated div's otherwise no need to use the clear property.
Here is the simple code of yours i have some simple changes in your CSS.....
HTML
<div id="content2">
<div>div1</div>
<div>div2</div>
</div>
CSS
#content2 {
background: none repeat scroll 0 0 red;
height: 200px;
width: 1024px;
}
#content2 div:first-child {
background: none repeat scroll 0 0 #E4ECF7;
height: 45px;
}
#content2 div:last-child {
background: none repeat scroll 0 0 yellow;
border: 1px solid #E0DCD1;
height: 45px;
}
I hope this will help you........
you can use the following properties in your div class.
float:left
clear:right;
I am using CSS to float a div next to another one. This div only appears if the user is looking at their own "business." When I don't clear anything, a large space appears between these divs and the next one. When I do clear the float, the text in the next div is pushed to the left. I think I am misunderstanding something about how to use the float and clear. I'm not very good with CSS.
How can I remove the space without destroying the "fs" div?
Here are pictures to show what is happening:
Here's the CSS and HTML code:
div.stuff {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
margin:10px;
width:35%;
height:65px;
border-radius: 5px;
}
div.container {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
top:-97px;
right:10px;
border-radius: 5px;
overflow: hidden;
float:right;
clear:right;
}
div.fs {
border-style:double;
text-align:center;
padding:10px;
margin:10px;
margin-left:20%;
width:60%;
border-radius: 5px;
}
<div class=stuff>
<img src=/economy/images/cash.png> Cash on Hand: 10,245<br>
<img src=/economy/images/worker.png> Workers Employed: 6<br>
<img src=/economy/images/machine.png> Machines Leased: 4
</div>
<div class=container>
Click Here to Manage Cash on Hand.<br>
Click Here to Manage this Business.<br>
Click Here to Disband this Business.
</div>
<br>
<div class=fs><a href=/economy.php?section=fs&id=7>Historical Financial Statements</a></div>
You need to float your left hand div, and use clear:both on the div at the bottom. I've made some changes in this jsFiddle.
perhaps this:
div.container {
border-bottom:dotted 1px;
border-left:dotted 1px;
border-right:dotted 1px;
border-top:dotted 1px;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
/*top:-97px;*/
margin-top:-97;
right:10px;
border-radius: 5px;
overflow: hidden;
float:right;
/*clear:right;*/
}
I would float your div.stuff to the left and your div.container to the right and just use clear: both on the div.fs element. I made a small fiddle to illustrate this. In this fiddle I added a wrapper class for clarity where I set a min-width to prevent that the right div floats down one line when the browser window is resized. Try it out!
Here's the CSS:
div.stuff {
border: 1px dotted black;
padding:10px;
margin:10px;
width:35%;
height:65px;
border-radius: 5px;
float: left;
}
div.container {
border: 1px dotted black;
padding:10px;
padding-left:25px;
margin-bottom:10px;
position:relative;
height:65px;
width:45%;
margin: 10px;
border-radius: 5px;
overflow: hidden;
float:right;
}
div.fs {
clear: both;
border-style:double;
text-align:center;
padding:10px;
margin:10px;
margin-left:20%;
width:60%;
border-radius: 5px;
}