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/
Related
I am a rookie, I tried to make a div with 2 spans today with an img and a p element. Well, here is the relative code below, but the two spans stay at the diff vertical position.I do not know why, as they all have the same css, and the width of the wrapper is long far enough.
<div id="bannerwrapper">
<span>
<img src="mail.png">
</span>
<span>
<strong>xxxx#gmail.com</strong>
</span>
</div>
And, the css is
*{
margin: 0;
padding: 0;
line-height: 1.6;
}
#bannerwrapper{
width: 163px;
height: 21px;
margin: 10px auto;
}
#bannerwrapper span{
display: inline-block;
height: 21px;
}
#bannerwrapper span img{
width: 30px;
height: 21px;
}
At last, I gave the second span a float right css to solve this problem, surely it would.
But I am not leaving the problem, I am not just asking for solutions, I want to know why, Why the two spans did not stay at the same vertical position before?
Thanks for your time.
Under image there is a little gap, declare img as block or add vertical-align.
#bannerwrapper span img{
width: 30px;
height: 21px;
display: block;
}
OR
#bannerwrapper span img{
width: 30px;
height: 21px;
vertical-align: middle;
}
Above you have two possible solutions how to fix that. Something more why it's needed at https://stackoverflow.com/a/27177987/.
You have to add vertical-align: middle to img element:
* {
margin: 0;
padding: 0;
line-height: 1.6;
}
#bannerwrapper {
width: 163px;
height: 21px;
margin: 10px auto;
}
#bannerwrapper span {
display: inline-block;
height: 21px;
}
#bannerwrapper span img {
width: 30px;
height: 21px;
vertical-align: middle;
/*Add vertical align middle*/
}
<div id="bannerwrapper"> <span>
<img src="http://placehold.it/200x100">
</span>
<span>
<strong>xxxx#gmail.com</strong>
</span>
</div>
I strongly suggest to take a look to vertical-align property.
I'm trying to layout a screen using div's and CSS. It's a simple layout at this point but I can't seem to get the div's to line up. I want one wrapper div with two div's within it: one aligned to the left and one aligned to the right. However, they end up on top of each other.
I know this question is simple. What am I missing here?
If I reduce the width of the right div to 60% it lines up right but shouldn't I be able to use 100% of the width of the parent div?
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Float left your children elements:
jsBin demo
#product_wrapper > *{float:left;}
Note that inline-block causes the inner elements to actually act like inline elements
where white spaces count!
SO another way would be to modify your HTML removing the NewLine separator:
jsBin demo
<div id="images_wrapper">
Foo content
</div><div id="content_wrapper">
^^-------------------------------------- no space here
Bar content
</div>
The third way (the worst one) is to set font-size to 0 for the parent (will remove logically the child's white-space gap since is now '0'); >> and than reset the font-size for children elements to px (cause em will not work since parent has 0).
But that's a good way to loose track of dynamic and responsive font sizes expecially if you use em and size inheritances.
The problem is the whitespace in the html, which occupies some space between the elements.
One way of fixing it is
#product_wrapper {
font-size: 0; /* Hide whitespace in the html */
}
#images_wrapper, #content_wrapper {
font-size: 16px; /* Reset to whatever vaue */
}
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
font-size: 0;
}
#images_wrapper, #content_wrapper {
font-size: 16px;
}
#images_wrapper {
background-color: red;
display: inline-block;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
display: inline-block;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
Use float:left instead of display:inline-block
#product_wrapper {
display: inline-block;
height: 75%;
width: 75%;
background-color: white;
text-align: top;
margin: 0 auto;
}
#images_wrapper {
background-color: red;
float:left;
height: 100%;
width: 30%;
margin: 0;
padding: 0;
}
#content_wrapper {
background-color: blue;
float:left;
height: 100%;
width: 70%;
margin: 0;
padding: 0;
}
<div id="product_wrapper">
<div id="images_wrapper">Foo</div>
<div id="content_wrapper">Bar</div>
</div>
I am very new to web design, so I might be completely over my head here.. but I can not seem to figure out how to work this. I have an image inside my first div, underneath this I want to have to more divs with the background colors in which I will add content. But for some reason my divs are not adjusting with the browser. Everytime I adjust the browser to be smaller, the divs backgrounds are separating and a white space is coming in between them.
Any help would be highly appreciated.. Also any critical feedback on my obvious coding skills, would be highly appreciated.
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class= "header">
<div class="large-logo-wrap">
<img src="Assets/Giadaslogoindexwhitebig.png" draggable="false"></img>
</div>
<div class="middle">
</div>
<div class="end">
</div>
</body>
</html>
CSS
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-size: 100%;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
max-width: 700px;
}
.middle{
position: absolute;
top: 768px;
background-color: rgb(229,225,209);
width: 100%;
height:100%;
background-size: 100%;
overflow-y: auto;
}
.end{
position: absolute;
top: 1500px;
background-color: rgb(29,25,29);
width: 100%;
height:768px;
background-size: 100%;
}
be nice. Cheers!
I suggest you take a closer look at the code and strip out as much as you can to see what is actually necessary to get where you are going. Here is a fiddle with some cleaned up code that does what I think you are going for. Hopefully it helps.
HTML
<header class="container global-header">
<div class="inner-w">
<div class="large-logo-wrap">
<img src="http://placehold.it/400x300" />
</div>
</div>
</header>
<section class="container section01">
<div class="inner-w">
Middle - arbitrary set height - I suggest you let the content decide the height
</div>
</section>
<section class="container section02">
<div class="inner-w">
Other section - arbitrary set height
</div>
</section>
CSS
*, *:before, *:after { /* get your box model so that padding and margins go inside the box instead of outside, and add to the overall size of the box */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.container { /* things the sections have in common */
width: 100%;
float: left;
}
.inner-w {
max-width: 700px;
margin-right: auto;
margin-left: auto;
padding: 1em;
border: 1px solid rgba(0,0,0,.05); /* just so you can see */
/* by using an inner div in your container... you allow yourself to maintain a background-color across the whole page if you wish. If you don't want that, then you just style the inner div for each section with the background color */
}
.global-header {
background-color: lightblue;
text-align: center; /* centers inline, and inline-block elements (logo) */
}
.large-logo-wrap {
display: inline-block;
max-width: 8em; /* set max image size */
}
.large-logo-wrap img { /* responsive image */
display: block;
width: 100%; /* fits whatever you set the wrapper to */
height: auto;
}
.section01 { /* arbitray section */
background-color: rgb(229,225,209);
color: rgb(0,0,0);
min-height: 234px; /* if you absolutly must - choose a height... use min */
}
.section02 { /* arbitray section */
background-color: rgb(29,25,29);
color: rgb(229,225,209);
min-height: 346px; /* if you absolutly must - choose a height... use min */
}
Please change your css with this one:
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.middle{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(229,225,209);
}
.end{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(29,25,29);
}
Some of your css styles were wrong, for example you used width and height with %100 which is wrong and effects on all of your css styles.
Also, you used position:absolute for all of div which effects on div to be nonadjustable.
This is a common question but slightly different from the solutions I found and I've been trying to solve it without success, so if someone could give me a help on this I would appreciate.
I have a #wrapper div that stretches to 100% width and height of browser. So far, so good... Now, inside the #wrapper I need a #content div that auto stretches with the parent div maintaining a 30px margin around it. I (almost) managed to do it but I can't make the #content div stretch in its height.
Here's an example of what I'm trying to do:
This is the CSS code I have:
* {
margin: 0;
padding: 0;
outline: 0;
}
html, body {
height: 100%;
width: 100%;
text-align: center;
cursor: default;
}
#wrapper {
width: 100%;
min-height: 100%;
height: auto !important;
position: absolute;
background: #333;
text-align: center;
}
#content {
/*width: 100%;*/
min-height: 100%;
height: auto !important;
margin: 30px;
overflow: hidden;
background: #ccc;
}
This is the HTML:
<body>
<div id="wrapper">
<div id="content">
This DIV should stretch to 100% height of its parent and body
minus the 30px margin around and resize as the window is resized.<br />
It's working in width but not in height!<br /><br />
Whatever goes in here (a child DIV) no matter its size should not be
visible beyond this DIV boundaries (as the Overflow is set to "hidden")!
</div>
</div>
</body>
And this is what I'm getting in both Chrome and IE:
Any help on this? Is it possible? Am I missing something stupid?
Thanks in advance,
LM
In your .css, replace #content with the following
#content {
overflow: hidden;
background: #ccc;
position: absolute;
top: 30px;
left: 30px;
right: 30px;
bottom: 30px;
}
#content {
min-height:90%;
position:absolute;
margin: 5%;
overflow: hidden;
background: #ccc;
}
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%.