I am new to CSS. I am building a webpage that will have 3 columns - the left one for navigation, the middle one for page content and the right one for external links and notes. First when I went with width in percentage, the overflow was working. Now the overflow is not working as well as the right border got disappeared. Here is my code. Please help me out. Thanks in advance.
//Total pixels: 1366px. (I found this after running a given code on www.w3schools.com).
#rightcontentborder {
border: 2px solid;
padding: 5px;
/* border-radius: 1em;*/
//Left-margin = 1366 - 716 = 650px.
margin-left: 650px;
margin-right:1366px;
// width:50px;
height:700px;
// overflow:scroll;
float: right;
position: absolute;
}
#maincontentborder {
border: 2px solid;
padding: 5px;
// background: #dddddd;
margin-left: 216px;
//Given width=500px.
//Right-margin = 1366 - (216+500) = 1366-716 = 650px.
margin-right: 650px;
// width: 100px;
height: 700px;
overflow: scroll;
// float: center;
}
#leftcontentborder {
border: 2px solid;
padding: 5px;
// background: #dddddd;
/* border-radius: 1em;*/
margin-left:0px; /*I have added this line to adjust the left margin of the LEFT content*/
margin-right:1150px; /*I have added this line to adjust the right margin of the LEFT content*/
//Width = 1366-1150 = 216px.
height:700px;
// float: left;
position: absolute;
}
If I got your requirement accurately, you need 3 column page. The css is not accurate you have written. You have to use float for achive this. Lets see the expected html
<div class="container">
<div class="left-content">
<!-- left sidebar content -->
</div>
<div class="main-content">
<!-- main content -->
</div>
<div class="right-content">
<!-- right sidebar content -->
</div>
</div>
Lets assume that the widths of the divs are 300px, 600px and 300px relative to left, main and right.
.container {
overflow: hidden;
width: 100%;
max-width: 1200px;
}
.left-content {
width: 25%;
max-width: 300px;
float: left;
min-height: 700px;
}
.right-content {
width: 25%;
max-width: 300px;
float: left;
min-height: 700px;
}
.main-content {
width: 50%;
max-width: 600px;
float: left;
min-height: 700px;
}
Try to understand the usage of css relative to the html. And customize with your dimensions. good luck.
Related
RE this on eBay: http://www.ebay.com/itm/281670060888
On my own site (at http://sallymilo.com/template-din.html) and when running on my own computer, the right side div aligns to the top of the left side div, but when I put it on eBay, the right side div is below the left - even if I make the tabbed section 200 pixels narrower.
A bit of the main CSS:
.row1 {
width: 100%;
position: relative;
float: left;
background: url(https://myimagefiles.com/dinnerman/tbg.png);
}
.row1l {
width: 26%;
position: relative;
margin-left: 2em;
float: left;
}
.row1r {
width: 64%;
position: relative;
margin-left: 2em;
margin-right: 2em;
float: left;
}
And a bit of the tabbed section CSS:
.tabholder {
width: 100%;
height: 14em;
font-size: 16px;
}
/* base font size for em-scaling */
.tabholder div.tabtops {
width: 100%;
max-width: 550px;
}
The issue is that in ebay the width of the container is lower than 1000px.
The because of the fact that your inner sections with hardcoded widths they break.
I suggest you to use width with %, in that way not matter what will be the with of the container the inner sections will take the number of the percentage that you gave.
.container {
margin: 20px;
background-color: rgba(0,0,0,0.2);
overflow: hidden;
}
.col-1 {
width: 20%;
background-color: rgba(0,0,0,0.2);
float: left;
}
.col-2{
width: 80%;
background-color: rgba(0,0,0,0.5);
float: left
}
<div class="container">
<div class="col-1">col-1</div>
<div class="col-2">col-2</div>
</div>
I want to get my footer to look like this Image. 4 columns inside a triangle shape.
However for some reason it appears that all four columns get stacked on-top of each other, which I confirmed by slight changing the top margin. When I comment out the #right_triangle, I get 4 columns, as you would expect. I believe its the border on the actual triangle that's doing it, but I cant figure out a way to do it or get around it.
Below is the code I'm using.
#right_triangle {
width: 0;
height: 0;
border-bottom: 300px solid #009933;
border-right: 2000px solid transparent;
}
#footer_column1 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column2 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column3 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column4 {
margin-top: 200px;
width: 25%;
float: left;
}
<div id="footer">
<div id="right_triangle">
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
</div>
Reason:
The problem as you've correctly guessed is with the #right_triangle but it is not because of border. It is because of width: 0 on this element and width: 25% on child #footer_column* elements. May be you overlooked it (or maybe you haven't understood the concept fully) but a percentage width on a child element would use the parent's set width as reference for calculation. Thus the width of all child elements are nothing but 0px. Since they are floated, the second and subsequent elements are offset from their previous sibling only by the width of the previous element(s) and they don't have any margin on the right also. So, effectively they are all placed at 0px on the left (on top of each other).
Again since they are floated they stay in same line unless their width exceeds a line's width. Here the width is also not more than a line's width (which is the parent's width). If you set even width: 1px to any of the first three elements, you'd notice that the others get pushed to the next line.
Solution:
Given how you need the screen's width to be split evenly across the 4 columns (from the image) and without changing your overall approach, you could make use of any one of the following solutions:
Give all the #footer_column* elements, a width in viewport units instead of in percentages, set display: inline-block instead of float: left and add white-space:nowrap to the parent. All these will make them get displayed on the same line without changing your markup.
#right_triangle {
width: 0;
height: 0;
white-space: nowrap;
border-bottom: 300px solid #009933;
border-right: 2000px solid transparent;
}
#footer_column1 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
#footer_column2 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
#footer_column3 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
#footer_column4 {
margin-top: 200px;
width: 25vw;
display: inline-block;
}
<div id="footer">
<div id="right_triangle">
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
</div>
Make all the 4 footer column elements as children of footer element instead of #right_triangle. Since the footer is a block element, it gets 100% of the screen width by default and so it would be split evenly across the 4 children. Note that you would have to absolutely position the #right_triangle and use z-index: -1 on it for this method.
#footer {
position: relative;
}
#right_triangle {
position: absolute;
width: 0;
height: 0;
border-bottom: 300px solid #009933;
border-right: 2000px solid transparent;
z-index: -1;
}
#footer_column1 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column2 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column3 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column4 {
margin-top: 200px;
width: 25%;
float: left;
}
<div id="footer">
<div id="right_triangle"></div>
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
Notes:
Using CSS transform for achieving the triangle in this question would be tough because it will require specific angle calculations for both skew and rotate (depending on which one is used) and hence not recommended.
Gradients could have been a good option for this one but unfortunately they get rough and jagged edges at very high dimensions and hence not recommended.
If you can change your overall approach, I'd recommend using SVG to create the triangle. It is not that SVG offers any great advantage for this particular shape but it is generally more useful to start learning and using SVG for shapes as it helps in creating a lot of complex ones with ease. Below is a snippet using SVG.
#footer {
position: relative;
}
#right_triangle {
position: absolute;
width: 2000px;
height: 300px;
z-index: -1;
}
#right_triangle path {
fill: green;
}
#footer_column1 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column2 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column3 {
margin-top: 200px;
width: 25%;
float: left;
}
#footer_column4 {
margin-top: 200px;
width: 25%;
float: left;
}
<div id="footer">
<svg id="right_triangle" viewBox='0 0 2000 300'>
<path d='M0,0 2000,300 0,300z' />
</svg>
<div id="footer_column1">Hello</div>
<div id="footer_column2">Hello</div>
<div id="footer_column3">Hello</div>
<div id="footer_column4">Hello</div>
</div>
I have 5 <div> elements and they all float left.
How can I push UP my last div? (i cant use 2 more wrappers because they will be re-sized with jQuery, all 5 of them must be in same wrapper)
I don't know if I explain my problem in a right way so if you have question, please ask.
HTML:
<div id="ModeliSadrzajAir">
<div class="kocka220x140">1</div>
<div class="kocka220x140">2</div>
<div class="kocka220x300">3</div>
<div class="kocka220x300">4</div>
<div class="kocka460x140">5</div>
</div>
CSS:
#ModeliSadrzajAir {
width: 960px;
margin: -60px 0px 0px -10px;
min-height: 500px;
background-color: #00FFFF;
position: absolute;
z-index: 1000;
}
.kocka220x140 {
border-radius:5px;
width: 220px;
margin: 10px;
height: 140px;
float: left;
background-color: #FFFF00;
}
.kocka220x300 {
border-radius: 5px;
width: 220px;
margin: 10px;
height: 300px;
float: left;
background-color: #FF0000;
}
.kocka460x140 {
border-radius: 5px;
width: 460px;
margin: 10px;
height: 140px;
float: left;
background-color: #FF0000;
}
Fiddle
You've to set your .kocka220x300's float property from left to right
I also suggest you to change your html to this
<div id="ModeliSadrzajAir">
<div class="kocka220x140">1</div>
<div class="kocka220x140">2</div>
<div class="kocka220x300">4</div> <!-- This comes first -->
<div class="kocka220x300">3</div> <!-- This comes second -->
<div class="kocka460x140">5</div>
</div>
This way, your 3 is on the left side of 4, check the fiddle link for the update
You can try this http://jsfiddle.net/modaloda/czz2Z/9/
.kocka460x140
{
border-radius: 5px;
width: 460px;
margin: 10px;
height: 140px;
float: left;
background-color: #FF0000;
position: absolute;
top: 160px;
}
I tried to reproduce your example.
Basically I think you need one wrapper with position:relative; that contains all divs and make the 5th div position:absolute; and bottom:0px;. Also add overflow:auto; so that the max height you have contained in your parent div will push the parent div's height (read it again you will understand :P).
Check this fiddle:
http://jsfiddle.net/R8hJ3/1/
Have You Tried Some plugins like Grid-a-licious..
if not try it out.. Else if you need a pure Css you could have a look the link below..
jsfiddle.net/chermanarun/HaV29/
I'm having trouble getting my layout working correctly, I have a main div and a sidebar div these are both float: left if the screen size is resized or if its viewed on screen smaller that what I have designed on (1920x1080) then the sidebar div drops below the main content.
I tried placing a wrapper around each div, but this has no effect.
<div id="header">
[Header]
</div>
<div id="content">
[Content]
</div>
<div id="sideBar">
[SideBar]
</div>
<div id="footer">
[Footer]
</div>
body
{
width: 100%;
color: #000000;
background-color: #000000;
margin: 0;
padding: 0;
}
#header
{
width: 100%;
height: 110px;
background-color: #336699;
color: #FFFFFF;
margin: 0px;
padding: 0px;
}
#content
{
float: left;
margin-left: 50px;
width: 70%;
height: 700px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
margin-bottom: 40px;
}
#sideBar
{
float: left;
margin-left: 50px;
width: 15%;
height: 400px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
}
#footer
{
width: 100%;
height: 80px;
background-color: #174555;
margin: 0px;
padding: 0px;
color: #ffffff;
clear: both;
}
Basicly both div's should resize until a certain size is reached, then scrolling should be enabled. I'm pretty sure I have done something simple wrong but i'm not much of a design person.
Example can be shown here : Link
Thanks for any advice :)
Karpie's right.
Also why not simply start out with one main div, say measuring 1000px in width, then work within that? If you can't do that then choose a measurement type, like px, and stick with for the widths, padding and margins of those elements. At least that would make it easier to do your math and know how much space you do or don't have.
I generally stick to relative measurements, like pixels (I don't like absolutes, it's personal. :P).
EDIT
Ok, try this, add a wrapper around the entire page (just to test, so bear with me). Give that wrapper an id of like #main-body or something, and define a width. Set the widths of the content and sidebar. If you minimize the screen, the sidebar shouldn't fall below the content div. It wil go outside the view port, though.
/* Wrap all in #main-body with specified width */
#main-body{
width:1000px;
margin:0 auto;
}
/* give these elements a relative width */
#content
{
float: left;
margin-left: 50px;
width:600px;
height: 700px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
margin-bottom: 40px;
}
#sideBar
{
float: left;
width:100px;
margin-left: 50px;
height: 400px;
margin-top: 40px;
padding: 30px;
background-color: #FFFFFF;
}
Sorry for the length of this. :P
You're mixing up percentages and pixels. 70% width + 30px padding + 50px margin (all on content) + 50px margin + 15% width + 30px padding (all on sidebar) can add up to more than 100%.
If you'll take a look at my site http://www.metroflatsmiami.com/listing.html, you'll see that I have a floating DIV on the right, but the thing is it's set off the left side. If you resize your window (or have a different resolution), it won't look right. I want it to always be just to the right of the main content DIV, but still scrolling... any thoughts?
The CSS:
.floating_price_box {
position:fixed;
width: 200px;
border: solid 1px black;
height: 400px;
top: 50px;
left: 1000px;
}
Use jQuery:
$(window).bind("load resize", function(){
$('.right-block').width($('.main-block').width() - (25));
});
Yeah....why not do right: 50px instead of left: 1000px?
If you set the floating_price_box div to have a left value of 75%, it will scale with the page size. It breaks when the browser window gets too small, but the window has to be pretty small for that.
.floating_price_box {
position:fixed;
width: 200px;
border: solid 1px black;
height: 400px;
top: 50px;
left: 75%;
}
In order to make the sidebar 25px to the right of the main content, you could also do something like this. Add an inner div to your floating price box:
<div id='home_search_container'>
...content...
</div>
<div class="floating_price_box">
<div class="floating_price_box_inner">
Nightly Rate: $90 - $130 (Instant Quote)<br/>
</div>
</div>
And here's your CSS:
#main {
float: left;
margin-right: 25px;
width: 700px;
}
.floating_price_box {
float: left;
width: 200px;
}
floating_price_box_inner {
border: solid 1px black;
height: 400px;
position: fixed;
top: 50px;
}
Basically all this second method does is float the outside boxes to the correct position. Then the inner div is styled to fix the box vertically where you want it.
The simplest way is to position it like the main content and then use margin to shift it to the side:
.floating_price_box {
position:fixed;
width: 200px;
border: solid 1px black;
height: 400px;
top: 50px;
/*left: 1000px;*/
margin-left : 700px; /* main column width */
}