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%.
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 have a simple page with content on the left and an aside on the right. I would like the div on the left to be 70% of the width of the container and then the aside take up the rest of the space, but I can't figure out how to give it a variable width.
I've tried setting the width of the aside to be 30%, but that doesn't leave any room for the 24px of space I'd like between the div and the aside. I also tried setting the width of the aside to be 28% and that gets it close, but I figured there's a more precise way of doing it.
Here's a simple example:
.container {
width: 80%;
margin: auto;
background-color: #ccc;
height: 500px;
padding: 24px;
}
.left {
background-color: white;
width: 70%;
height: 100%;
float: left;
}
.right {
background-color: white;
width: 28%;
height: 100%;
float: right;
}
<div class="container">
<div class="left"></div>
<aside class="right"></aside>
</div>
Without getting into Sass, you can use the CSS calc(); function.
Note that in the CSS below, I'm keeping your 28% value for graceful degradation on older browsers that do not support calc() (Old Android browsers, Opera Mini and IE8-).
Live example here.
.container {
width: 80%;
margin: auto;
background-color: #ccc;
height: 500px;
padding: 24px;
}
.left {
background-color: white;
width: 70%;
height: 100%;
float: left;
}
.right {
background-color: white;
width: 28%;
width: calc(30% - 24px);
height: 100%;
float: right;
}
Ok, how about this:
http://jsfiddle.net/9fy6txpa/
.left {
background-color: white;
width: 70%;
height: 100%;
float: left;
border-right:24px solid #ccc;
box-sizing:border-box;
}
Set the widths to 70% and 30% as desired. Instead of having a margin/padding between the div and the aside, give the div a 24px wide right-border and then change it's box-sizing property to border-box. That way, it's width will be 70% including the added border (a total width of 70%, not 70% plus the border as the default box model does).
I am facing a same problem. I'm trying to create two separate rows (marked as red background color) to be aligned horizontally in the center. One of the row on the left side of center part, and second one on the right side of the center part.
Do I need to add something or change some values? I've been trying to do this for 2 hours now.
Any help will be appreciated. Thank you :)
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
.others {
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
.others p {
margin: 0px auto;
height: 300px;
width:50%;
display-inline-block;
text-align:center;
float: left;
background-color: red;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
Worked for me just by removing float:left; and add display:table-cell; to .others p.
Fiddle
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:table-cell;
}
.others p {
margin: 0px;
height: 300px;
background-color: red;
display:inline-block;
}
i think you shouldnt use <p> for positioning.
use <div> instead.
also using float:left or float:right might solve your problem.
Read up on using floating items here:
http://www.w3schools.com/cssref/pr_class_float.asp
Also, when using floats, browsers will assume there is nothing inside your 'container' <div>.
So i'd also suggest you read up on using css attribute overflow.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
.others
{
position: relative;
vertical-align: middle;
width: 70%;
background-color: #d0d0d0;
height: 500px;
margin: auto;
padding: 40px 15% 20px 15%;
display: table;
}
#leftside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: left;
background-color: red;
}
#rightside
{
display:inline-block;
margin: 0px;
height: 300px;
width:50%;
float: right;
background-color: green;
}
<DIV CLASS="others">
<P ID="leftside">
News will be shown here as they appear.
</P>
<P ID="rightside">
Here you will be able to see our products.
</P>
</DIV>
You just need to provide to p a width value because you are floating the p elements to the left, every p element into the container will get out of the normal document flow and flow from left to right.
Just add width: 50% to every p element. like this:
.others p {
margin: 0px;
height: 300px;
float: left;
background-color: red;
width:50%;
}
Also provide a clearfix or overflow:hidden; to the .others in order to contain the floated elements within it's body.
Here is a demo to work with
Edit: Almost forgot. If you want to gain control onto your layout, provide also a min-width and a max-width value to the body container, so it doesn't strech to much on wide screens, nor it is contained to much on narrower screens. Also, try a css framework, like bootstrap. It will give you fine control onto your layout.
Cheers!
Looking at centering a div across all browser and screen resolutions.
Seen that the left 50% with margin-left of the div width to be quite common but wrapping the div completely in a containing div cuts off the background of my div.
My div will spread across the whole of the screen with a light grey background with an inner div with my content within.
I have tried using percentages and pixels but cannot get it to sit central in both 1920 wide and 1200 wide.
css is as follows:
#default-upper-strap {
background-color: #ddd;
width: 109.61%;
margin-top: 25px;
z-index: 99999;
position: relative;
overflow: hidden;
padding-left: 23px;
margin-left: -8px;
max-width: 1920px;
}
#default-strap-left {
width: 810px;
height: 100%;
float: left;
margin-left: 21%;
}
Why don't you start with the following:
<div class="default-upper-strap">
<div class="default-strap-left">Some content...</div>
</div>
body {
margin: 0;
}
.default-upper-strap {
background-color: #ddd;
width: 100%;
max-width: 1920px;
margin: 25px auto 0 auto;
padding-left: 0px;
}
.default-strap-left {
width: 810px;
height: 100%;
margin: 0 auto;
border-top: 1px dashed blue;
}
Use margin: 0 auto to center the child element within the parent container.
When the parent container reaches its maximum width, the margin: 25px auto 0 auto rule
will take care of centering the parent container if this is what you want.
See demo at: http://jsfiddle.net/audetwebdesign/JqxY8/
I'm having difficulty creating a 3 column layout with 3 divs. The left div needs to be a fixed width. The middle and right divs need to have fluid widths. When the browser is horizontally re-sized, the middle and right divs need to resize in a proportional manner.
I've seen some examples of 3 column fluid layouts with other fixed columns, but not for a fixed-fluid-fluid layout.
Markup to replicate my problem is below. The CSS is a little verbose, as I've been troubleshooting this. When I resize the browser the right div disappears below the horizontal line. Also, the 3 columns should take up 100% of the width of #caption_stripe, but they do not. There is about a 2-3 pixel gap that shows up on the right side.
<html>
<head>
<style>
.contentMain {
clear: both;
overflow: hidden;
width: 100%;
max-width: 1024px;
margin: 0 auto 0 auto;
}
#lessons_wrapper { background-color: blue; }
#caption_stripe {
position: relative;
overflow: hidden;
height: 37px;
width: 100%;
max-width: 1024px;
font-family: Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
font-size: 11pt;
font-weight: bold;
text-align: center;
color: white;
margin: 0;
padding: 0;
}
#caption_subjects {
float: left;
height: 37px;
background-color: #3c3d3d;
width: 13%;
max-width: 138px;
min-width: 138px;
margin: 0;
padding: 0;
}
#caption_topics {
float: left;
height: 37px;
background-color: #707070;
width: 42%;
max-width: 422px;
min-width: 100px;
margin: 0;
padding: 0;
}
#caption_modules {
float: left;
height: 37px;
background-color: #989898;
width: 45%;
max-width: 464px;
min-width: 100px;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div class="contentMain">
<div id="lessons_wrapper" style="display:block">
<div id="caption_stripe">
<div id="caption_subjects">SUBJECTS</div>
<div id="caption_topics">TOPICS</div>
<div id="caption_modules">MODULES</div>
</div>
<br style="clear:both;" />
</div>
</div>
</body>
</html>
I'll also need to do this on a bigger scale with divs that will appear below this caption. For now, if I can get an example of this working, I can probably get those working as well.
Thanks for your help.
Ok not sure why you had a % width on the first column if it is to be fixed.
But the main thing to note is, putting your fluid divs into a wrapping div. Then give your wrapper a left padding equal to the width of your fixed column.
.fluid-wrapper {
width: 100%;
height: 100%;
padding-left: 100px;
}
For this to work you will need to apply box-sizing to the wrapper. This means the padding will be deducted from the inner width of your wrapper, rather than added.
Its reasonably safe to use box-sizing on all elements, which can help greatly when creating fluid/responsive designs.
*, *:after, *:before {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
}
Here is a working JSFiddle: http://jsfiddle.net/nhwGA/1/