I'm new as webdesigner and I have to create a portion of a page that has 3 columns: a menu on the left side, the central body and a vertical banner. I can't use tables, so I've created a similar HTML:
<div class="Body">
<div class="LeftMenu">My menu</div>
<div class="Content">Foo body</div>
<div class="VerticalBanner">My menu</div>
</div>
While the CSS:
.LeftMenu {
width: 20%;
}
.Content {
margin: auto;
left: 20%;
position: absolute;
top: 0px;
width: 60%;
}
.VerticalBanner {
left: 80%;
margin: auto;
position: absolute;
top: 0%;
width: 20%;
}
So, my problem using that code is that the parent div (Body) takes the height of the first div (LeftMenu), which is not the bigger. This causes the content of "Content" and "VerticalBanner" to flow out "Body" and to go under the Footer div. If I use the float attribute, the "Body" div collapse without dimensions and then the footer div slides under the three columns inside "Body".
I also tried with display attribute, but Internet Explorer doesn't support this and some columns have strange behaviour.
What is the correct way to do this?
I think you should use floats for your DIVs. It's much easier after that to move them around.
Use display: table-*:
.Body { display: table; }
.Left, .Content, .VerticalBanner { display: table-cell; }
See e.g. this JSfiddle.
To stop the body div from collapsing you can use
.body{ overflow: hidden; }
I'm don't think you need position absolute.
<div class="Body">
<div style="width:20%;float:left;">My menu</div>
<div style="width:60%;float:left;">Foo body</div>
<div style="width:20%;float:left;">My menu</div>
<div style="height:1px;font-size:1px;clear:both;"> </div>
</div>
Related
I am making a website with different sections, one at the bottom of the screen. I first tried putting the div element inside of a footer element. This didn’t work. The div was still at the top of the screen. I was out of ideas, so I searched for a solution on Google. Nothing I tried worked. How can I do this?
If you want it to always be at the bottom of the screen (IE: touching bottom of monitor) you can use
.myElementClass{
position: absolute;
bottom: 0;
}
Just make sure that it's not inside anything declared with position: relative or it will be stuck at the bottom of that element.
If you want it to be at the bottom of the wrapper element, use
.myWrapperClass{
position: absolute;
}
and put the .myElementClass element inside the .myWrapperClass element
If you need your footer to be seen always on the screen or like this at the end of the page, here is the answer. The explanation is same as zachThePerson's.
.main {
position: relative;
height: 700px;
width: 100%;
background: blue;
}
.box {
position: absolute;
bottom: 0px;
width: 100%;
}
.box1 {
width: 100px;
height: 100px;
background: red;
float: right;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="main">
<h1>The float Property</h1>
<p>In this example, the image will float to the right in the text.</p>
<div class="box">
<div class="box1"></div>
</div>
</div>
</body>
</html>
You could use Flexbox, and the below solution could be useful.
You can put the main content of your page in the div with class main-content, and with the Flexbox settings below, the footer will always be pushed to the bottom.
HTML:
<body>
<div class="flexbox-container">
<div class="main-content">Just a random div with some content</div>
<div class="footer">Div to be on the bottom of the page</div>
</div>
</body>
CSS:
.flexbox-container {
display: flex;
flex-direction: column;
justify-content: space-between;
}
The above code won't change the height of the flexbox-container div, though. So you may want to add something like this:
.flexbox-container {
...
height: 100vh;
}
A good page with explanation for the Flexbox being used is A Complete Guide to Flexbox.
I have this markup:
<div id="wrapper">
<div id="container">
<div class="block"></div>
<div class="block"></div>
</div>
</div>
and this CSS:
#wrapper {
width: 100%;
overflow: hidden;
}
#container {
width: 200%;
}
.block {
width: 50%;
float: left;
}
Basically all I want to do is, have 2 fullwidth divs floating next to each other, but when I put some content in them I get container centered and pieces of both divs showing, like this: http://prntscr.com/8lr4l6
What am I doing wrong?
There is no need to set the width of the wrapper and of the container. It is always 100%, if nothing else is set. Just set a width of 50% to every block and float them left.
#wrapper {
overflow: hidden;
}
.block {
float: left;
width: 50%;
}
Example
would something like this work for you: http://jsfiddle.net/swm53ran/338/
you can see the div to by commenting out overflow: hidden
<div class="container">
<div class="block block1">
This is content for div 1 This is content for div 1 This is content for div 1
</div>
<div class="block block2">
This is content for div 2 This is content for div 2 This is content for div 2
</div>
</div>
body {
overflow: hidden;
}
.container {
width: 200%;
padding: 0px;
}
.block {
display: inline-block;
width: 50%;
float: left;
outline: 1px solid gray;
}
Boy, am I a fool!?
In my case answer was pretty simple. I had left autofocus attribute on my input which were on the off screen div, and of course it automatically scrolled to that div.
Thanks everyone for answers though. :)
My wrapper div is not expanding in height by it's content. On the other hand, it expands by the header div on the page, and the nav div, but not by the sidebar which lies inside another div. Here is the HTML:
<div id="wrapper">
<div id="header">
</div>
<div id="nav">
nav content goes here
</div>
<div id="pagecontent">
<div id="sidebar">
some sidebar stuff like login form
</div>
</div>
</div>
and the CSS (only the necessary css, not like webkit box shadows):
#wrapper {
width: 900px;
margin: 0 auto;
padding-bottom: 80px;
}
#header {
height: 160px;
width: 100%;
}
#nav {
width: 100%;
height: 40px;
}
#sidebar {
float: right;
width: 140px;
height: 100%;
}
#pagecontent {
width: 900px;
}
the sidebar, which has height 100%, goes outside the wrapper div, you could look at it on http://craftersinn.net
You've missed to add css rule overflow:hidden in #wrapper css.
Add overflow: hidden; to your wrapped CSS, also make sure your selectors are actually selecting elements:
<div id="pagecontent">// remove page
#content {
http://jsfiddle.net/Kyle_Sevenoaks/bPT49/
Add <div style="clear: both;"></div> after
<div id="sidebar">
some sidebar stuff like login form
</div>
You should read this article on floats, especially the section "Clearing the Float".
In short, you can use clear: both, overflow: hidden or the clearfix method. Good luck!
Here discussed the same problem. Check for clearing floats solution and explanation about overflow: hidden;
css box model does not stretch using padding
I have a webpage containing a centered container with content and I want to display a logo next to it.
The layout is as following: div - container. Where the container is centered and the div lef of the container needs to fill out the width left on the screen.
html, body {
height: 100%;
width: 100%;
}
#container {
width: 800px;
margin-left: auto;
margin-right: auto;
min-height: 100%;
}
<div id="container">
</div>
<div id="lef">
</div>
A jsfiddle with this code is available on http://jsfiddle.net/7QJQn/
This is the option that comes closed
http://jsfiddle.net/7QJQn/4/
I think that the best solution for doing something like this is just using javascript / jQuery.
Depending on which browsers you wish to support, you could use calc().
Basically, you want 50% of the viewport width (50vw) minus half of width of #container (so you're measuring from the center of your #container and you use half of all the values) - I'm assuming that you're OK with absolute positioning #lef to the viewport to keep it to the right?
CSS (fiddle here):
#lef {
background-color:yellow;
width:calc(50vw - 100px);
height:20px;
position:absolute;
right:0;
top:0;
}
Add this to your css:
#lef{
float:left
}
And change the order of the divs in the html, like this:
<div id="lef"></div>
<div id="container"></div>
First of all, you should wrap your markup in a wrapper div so elements stay tight.
I made some changes, take a look:
<div id="wrapper">
<div id="lef">
</div>
<div id="container">
</div>
</div>
And the css:
html, body {
height: 100%;
width: 100%;
}
#wrapper{
width: 360px;
}
#container {
width: 200px;
margin-left: auto;
margin-right: auto;
height: 100px;
background-color:red;
}
#lef {
background-color:yellow;
width: 160px;;
height:100px;
float: left;
}
Example
If using flexbox is an option, you can do this with the flex-grow property:
With the following markup
<div class="main-row">
<div class="filler"></div>
<div class="row-content">Fixed width centered div</div>
<div class="filler"></div>
</div>
you need to set flex-grow: 1 on the filler divs. See this fiddle.
HTML
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
</div>
CSS
.wrapper { width: 960px; margin: 0 auto; position: relative; }
.image { float: left; }
.outside { position: absolute; top: 0; left: -20px; }
I want .outside to extend outside the .wrapper, however there are two problems: as is, .wrapper does not extend down to accommodate for the floated .image; setting .wrapper to overflow: auto fixes the height issue, but hides the absolutely positioned .outside. How can I get both the height to stretch automatically and not have the absolutely positioned element be cut off?
EDIT: my wrapper is set to relative, sorry - forgot to add that. For further clarification, here are some crappy diagrams:
EDIT 2: I got it to work by adding a wrapper around the image and copy and setting it to overflow: auto. I wanted to avoid unnecessary markup, but oh well... Thanks everyone!
You just need to clear your float.
Add another empty div like:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="outside"></div>
<div class="clearfix"></div>
</div>
CSS:
.clearfix { clear: both; }
Float the wrapper (add float: left to the css for .wrapper), or put <BR style="clear: both;"> after the floated image.
Put the absolute div outside the wrapper, rather than inside it.
But why are you doing position absolute? I bet you don't need to do that, and if you gave more info on what you are trying to do there might be an alternative.
Position absolute will position it absolutely to the body unless its parent has a position other than static. If you want it positioned absolutely to the parent (.wrapper), you need to give .wrapper a position such as position:relative;
Then, add a div to clear your floats:
<div class="wrapper">
<div class="image"></div>
<div class="copy">blabla</div>
<div class="clear"></div>
<div class="outside"></div>
</div>
CSS:
.wrapper {
background-color:red;
width: 200px;
margin: 0 auto;
position:relative;
}
.clear {
clear:both;
}
.image {
float: left;
}
.outside {
background-color:yellow;
position: absolute;
top: 0;
left: -20px;
width:100px;
height:20px;
}
Demo: http://jsfiddle.net/AlienWebguy/6Fmy2/
Resolved by adding an additional wrapper with overflow: auto around .image and .copy.