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.
Related
I want to make a 1 px line from the left side of the screen to the end of a centered div.
The div is centered with margin: auto;.
This image shows how it should look:
Here's an example using calc:
.box{
width:200px;
height:200px;
border:1px solid blue;
margin:0 auto;
}
.line{
border: 1px solid red;
width: calc(((100% - 200px)/2) + 200px);
}
JSFiddle
Browser support
How about this solution? no extra markup needed, cross browser and does not depend on the width of the element
#content {
width:400px;
height: 200px;
margin:auto;
position: relative;
}
#content:before{
content: '';
height: 1px;
background: red;
position: absolute;
top: -5px;
right: 0;
width: 999%; /*a large number*/
}
Demo fiddle
here is another solution and it is cross browser http://jsfiddle.net/9qrSy/3
<div class="inner"></div>
<div class="wrapp"></div>
css
body {
padding:8px;
}
div.wrapp {
width:300px;
height:300px;
border:2px solid green;
margin:auto;
position:relative;
}
div.wrapp:before {
content:'';
position:absolute;
width:100%;
height:1px;
right:0;
top:-6px;
background:blue;
z-index:1;
}
.inner {
width:50%;
float:left;
position:absolute;
height:1px;
left:0;
top:12px;
background:blue;
}
I am not sure if this works in all browsers, but I believe hr takes up all the space you provide it with. Therefore you can give it a large negative left-margin and put it inside the centered div. Instead of a hr-element, you could use an empty div too, which might or might not be easier to use. You can set the border-top style of that div to a wider range of border-types (dotted for example).
<div id="content">
<hr id="bar" />
<div id="realcontent">
Something here
</div>
</div>
With CSS:
#content {
width: 400px;
margin: auto;
color: white;
}
#bar {
margin-left: -1000px;
margin-bottom: 5px;
background: blue;
}
#realcontent {
background-color: #000000;
}
I just have a container div-element that contains two div-elements that should appear at the same level on both sides of the container-div. The following solution does not work:
<div id="result" >
<div class="right">Update</div>
<div class="left">delete</div>
</div>
stylesheet follows:
div.left{
position:absolute;
left: 5px;
top:0px;
color: green;
border-style:solid;
border-color: green;
}
div.right{
position:absolute;
right: 2px;
top:0px;
color: red;
border-style:solid;
border-color: red;
}
#result{
position:relative;
width:100%;
border-style:solid;
border-color: blue;
}
The blue margin from the container-div does not contains the the other two divs and appears on top of the other two containers.
What am I missing? Thanks!
Ideally the .left and .right divs would be floated:
div.left{
float: left;
margin: 5px;
color: green;
border-style:solid;
border-color: green;
}
div.right{
float: right;
margin: 5px;
color: red;
border-style:solid;
border-color: red;
}
you have put position which is not needed basically.
see below answer
html here
<div id="result" >
<div class="right">Update</div>
<div class="left">delete</div>
</div>
css here
div.left{
left: 5px;
top:0px;
color: green;
border-style:solid;
border-color: green;
float:left;
}
div.right{
right: 2px;
top:0px;
color: red;
border-style:solid;
border-color: red;
float:right;
}
#result{
width:100%;
border-style:solid;
border-color: blue;
float:left;
}
live example here.
http://codepen.io/anon/pen/waKrH
please mark as answer if this helped you.
What you could try is float:left to both of the elements your trying to put side by side, that should push-force them, see if it works and let me know.
Are you trying to achieve this fiddle?
Better way is to change the apsolute into relative,with floating.
And if you use floating, dont forget to add overflow:hidden; to the parent container.
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
I've been trying to create a site with the following structure:
But I can't seem to get the header correct (e1 left, e2 centered, e3 right). I want the three elements e1, e2 and e3 to be left, middle and right positioned. This is what I'm trying:
<div id="wrapper">
<div id="header">
<div id="header-e1">
1
</div>
<div id="header-e2">
2
</div>
<div id="header-e3">
3
</div>
</div>
<div id="nav">
links
</div>
<div id="content">
content
</div>
<div id="footer">
footer
</div>
</div>
With this css:
#wrapper
{
width: 95%;
margin: 20px auto;
border: 1px solid black;
}
#header
{
margin: 5px;
}
#header-e1
{
float: left;
border: 1px solid black;
}
#header-e2
{
float: left;
border: 1px solid black;
}
#header-e3
{
border: 1px solid black;
}
#nav
{
margin: 5px;
}
#content
{
margin: 5px;
}
#footer
{
margin: 5px;
}
Can someone give me tips to what I can do? The structure is going to be used on a mobile website.
UPDATE
The code I have above gives me this:
But I want the 2 centered and the 3 on the right side. I don't want to set the width to a percent because the content in the elements may vary, meaning it may be 20/60/20 - 10/80/10 - 33/33/33 or something else.
Utilize the Magic of Overflow: Hidden
If you can swap the html position of 2 & 3 like so:
<div id="header-e1">
1 is wider
</div>
<div id="header-e3">
3 is also
</div>
<div id="header-e2">
2 conforms
</div>
Then you can set this css which will cause 2 to "fill" the available space because of the overlow: hidden on it. So if 1 & 3 expand, 2 narrows (shrink window down to see what happens at really small size).
#header-e1 {float: left;}
#header-e2 {overflow: hidden;}
#header-e3 {float: right;}
Technically, you could keep your current html order and your float: left on both 1 & 2 and make 3 the flex div with overflow: hidden. You could do the same with 1 by reversing the order of the html completely and setting 2 & 3 to float: right with 1 having overflow: hidden. To me it would seem best to have the middle flex, but you know your application better than I.
If you are trying to make the site with a responsive width, you can try the following (33% is roughly one-third):
#header-e1 {
float: left;
width:33%;
border: 1px solid black;
}
#header-e2 {
float: left;
width:33%;
border: 1px solid black;
}
#header-e3 {
float: left;
width:33%;
border: 1px solid black;
}
You could also used fixed widths for the divs. If you want the further from each other you can play with their left/right margins etc. Hope that helps!
Here is an edit for no widths:
#wrapper {
position:relative; (add to wrapper)
}
#header-e1 {
position:absolute;
left:0;
border:1px solid black;
}
#header-e2 {
position:absolute;
left:50%;
border:1px solid black;
}
#header-e3 {
position:absolute;
right:0;
border: 1px solid black;
}
You need to give the divs in your header a width, and float header-e3 left.
Note: They all have the same CSS properties, so just give them the same class like .headerDivs and then you don't have repeating code
Edit: here is a working jsfiddle: http://jsfiddle.net/eNDPG/
I'm using a similar idea to what RevCocnept suggested with the width: 33%, except using display: inline-block instead of float: left. This is to avoid removing the div elements inside #header from the flow of the page and causing the height of #header to become zero.
#header > div {
display: inline-block;
width: 31%;
margin: 5px 1%;
}
Demo
You can do something like this:
HTML
<div>
<div id="left">Left</div>
<div id="right">Right</div>
<div id="center">Center</div>
</div>
CSS
#left {
float: left;
border: 1px solid red;
}
#right {
float: right;
border: 1px solid blue;
}
#center {
margin-left: 50px;
margin-right: 50px;
border: 1px solid green;
text-align: center;
}
The centered <div> must come as the last one in the HTML code.
Here's a JS Bin to test: http://jsbin.com/evagat/2/edit
<style type="text/css">
body {
margin:0;
}
#header {
width:100%;
**strong text**margin:auto;
height:10%;
background-color:red;
}
#left {
width:20%;
float:left;
#margin:auto auto auto auto;
height:100%;
background-color:blue;
}
#right {
float:right;
width:20%;
#margin:auto auto auto auto;
height:100%;
background-color:green;
}
#middle {
position:relative;
left:0;
right:0;
margin:auto;
height:80%;
background-color:yellow;
width:100%;
}
#middle1 {
width: 80%;
margin:auto;
height:45%;
background-color:black;
}
#middle2 {
width: 80%;
margin:auto;
height:40%;
background-color:brown;
}
#middle3 {
width: 80%;
margin:auto;
height:15%;
background-color:orange;
}
#midmain {
width: auto;
margin:auto;
height:100%;
background-color:white;
}
#footer {
width:100%;
margin:auto;
height:10%;
background-color:red;
}
</style>
now check comment for html design.
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;
}