I am trying to achieve this in HTML/CSS:
+---------------------------------------------------------------------+
| HEADER DIV |
+------------+--------------------------------------------------------+
| | |
| | |
| | |
| | |
| | |
| nav DIV | scrollable DIV |
| | |
| | |
| | |
| | |
| | |
| | |
+---------------------------------------------------------------------+
| FOOTER DIV |
+---------------------------------------------------------------------+
Header and footer div are browser window width.
header and footer and fixed height in pixels
header and footer and fixed on the top and bottom of the browser
window nav div is the height of the browser window minus (header height +
footer height)
scrollable content is scrolling internally, without affecting the
absolute position of hte footer or header.
I can only get to a point where both nav DIV + and scrollable DIV scroll together.
I can't make the NAV div not scroll while the scrollable DIV scrolls.
I guess the key is how I put the two divs side by side and yet not scroll one of them when the other scrolls.
<style>
* { margin: 0; padding: 0; }
.container { position: fixed; height: 100%; width: 1000px; }
.header { height: 10%; width: 100%; }
.wrapper { width: 100%; height: 80%; }
.wrapper .nav { width: 20%; display: inline-block; vertical-align: top; }
.wrapper .scrollable { width: 80%; margin-left:-4px; display: inline-block; vertical-align: top; overflow-y: scroll; }
.footer { height: 10px; width: 100%; }
</style>
<body>
<div class="container">
<div class="header"></div>
<div class="wrapper">
<div class="nav">
</div>
<div class="scrollable">
</div>
</div>
<div class="footer"></div>
</div>
</body>
nav
{
margin-left:0px;
width:100px;
}
scrollable
{
margin-left:100px;
}
OR
.container
{
width:800px;
}
.nav{
width: 300px;
float: left;
}
.scrollable {
width: 500px;
float:right;
}
HTML File
<div class="container">
<div class="nav">left content</div>
<div class="scrollable">right content</div>
</div>
Try this i hope it may help you !
Related
I admit it... I'm struggling with this one... I'm trying to make a responsive page with 4 stacked divs.
All divs are width: 100%
The header div: I want the text to display at the bottom of the div (this would be a slogan) so it appears closer to the image.
The image div: I want the image centered vertically and horizontally in the div.
The button div: I want the button (logon) at the top of the div so it appears closer to the image.
The footer div: I want to be at the absolute bottom of the page no matter what.
+-----------+
| |
| |
| Header |
+-----------+
| |
| Image |
| (75%x75%) |
| |
+-----------+
| Button |
| <a link |
| |
+-----------+
+-----------+
| Footer |
+-----------+
On an iPad what I have seems to work but when I load it on a device with a smaller screen (android or iPhone 4/5) it all crumbles...
My HTML:
<div id="welcomePage">
<div class="welcome">
<div class="welcome_header">
<h1 class="welcome">Welcome Slogan</h1>
</div>
<div class="welcome_image">
<img src="logo.svg">
</div>
<div class="welcome_button">
<input type="button" value="Get Started Now!">
<p>Already have an account? Login here</p>
</div>
<div class="welcome_footer">
<h3>© 2018 BlahBlah, Inc.</h3>
</div>
</div>
</div>
My CSS:
.welcome {color: #5e87b0; height:100%; }
.welcome_header {width: 100%; height: 25%; min-height: 25%; display: table-header; vertical-align: text-bottom;}
.welcome_header h1{font-size:6vh;}
.welcome_image {width: 100%; margin-left: 0px; position: absolute; top: 50%; transform: translateY(-50%); }
.welcome_image img {border: 0; width: 75%; height: 75%;}
.welcome_button {width: 100%; height: 20%; position: absolute; clear: both; position:absolute; bottom:5%; left:0;}
.welcome_button h3 {transform: translateY(100%); bottom:0; text-align: center;}
.welcome_footer {width: 100%; height: 5%; position: fixed; clear: both; bottom: 10px; left:0;}
.welcome_footer h3{font-size:1vh;}
What am I missing (besides modern css skills ;-) )?
You can easily stack them with flex
#welcomePage {
display: flex;
flex-direction: column;
}
#welcomePage div {
flex: 1 1 auto;
}
This question already has answers here:
Two column layout with left fluid and right fill the rest width
(4 answers)
Closed 6 years ago.
I need to do a layout in this way:
----------------------
| header |
----------------------
| N | |
| A | CONTENT |
| V | |
|-----| |
| | ----BAR---- |
|EMPTY| |
| | |
----------------------
I want the overall width to be 100% of the body,
the navigation has width 15% but min-width 120px.
The width of the bar (that is an element in the content div) has to be 100% of the content div.
In the html I have the limitation that the navigation div has to go before the content div.
EDIT:
My code in the html is
<div id="main">
<div id="header"></div>
<div id="nav"></div>
<div id="content><p id="bar">Title of paragraph</p></div>
</div>
The code i have in the css right now is:
#nav {
float: left;
width: 15%;
min-width: 120px;
}
#content{
float: right;
}
#bar {
display: block;
background-color: #D2DEE4;
}
Could you help me please?
I like the flexbox method more, however keep in mind this doesn't work with IE9 and below.
Flex-basis (aka flex: {shrink} {grow} {flex-basis}) is required because flex doesn't work well with css widths.
*{
margin: 0;
padding: 0;
}
header{
padding: 10px;
width: 100%;
background: #888;
}
.sidebar{
padding: 10px;
flex: 0 0 120px;
background: #07f;
}
.content{
padding: 10px;
background: #ddd;
width: 100%;
}
.container{
display: flex;
flex-direction: row;
}
<header>
This is the header
</header>
<div class="container">
<div class="sidebar">
This is the sidebar
</div>
<div class="content">
This is the content
<br>
test
</div>
</div>
This method is static and doesn't allow for percentages (you'd have to use media queries for other screen sizes.)
*{
margin: 0;
padding: 0;
}
header{
padding: 10px;
width: 100%;
background: #888;
}
.sidebar{
box-sizing: border-box;
float:left;
background: #06f;
display:block;
width: 120px;
padding: 10px;
}
.content{
box-sizing: border-box;
padding: 10px;
display:block;
background:#ddd;
margin-left: 120px;
}
<header>This is the header</header>
<div class="sidebar">
This is the sidebar
</div>
<div class="content">
This is the content
<br>
test
<br>
test
<br>
test
</div>
Alright, here's my problem: I've got a Div with a logo in it floated left, and a div with a menu in it floated right. When they touch, the menu drops to a new line, and I'd like them to be forced to stay on a single line, with the logo getting smaller instead.
| |
| +---------------+ |
|<---| logo |---> |
| | variable width| +----------------------------------------+ |
| | float left | | Menu | |
| | | | fixed width based on content | |<----->
| | | | float right | |
| | | +----------------------------------------+ |
| +---------------+ |
| |
The layout is basically:
<div class="Container">
<div class="Logo">
<a>
<img></img>
</a>
</div>
<div class="MenuContainer">
<div class="MenuInnards"></div>
</div>
</div>
Thanks for any help!
you can use "display:table" to solve the problem. By using this code you can also vertically center the content (as you show in your scheme).
HTML
<div class="Container">
<div class="Logo">
<a>
<img></img>
</a>
</div>
<div class="MenuContainer">
<div class="MenuInnards"></div>
</div>
</div>
CSS
.Container{max-width: 800px; width: 100%; display:table;}
.Logo{display:table-cell; vertical-align:middle}
.Logo a img{width: 100%; max-width: 200px}
.MenuContainer{vertical-align:middle; display:table-cell; width:400px;}
.MenuInnards{float:right;}
Try this
HTML
<div id="holder">
<div id="left">
<a><img/></a>
</div>
<div id="right"></div>
</div>
CSS
#holder {
width: 960px;
height: 300px;
background-color: green;
margin-left: auto;
margin-right: auto;
}
#left {
width: 248px;
height: 130px;
background-color: yellow;
float: left;
margin-top: 50px;
margin-left: 20px;
margin-right: 20px;
}
#right {
width: 640px;
height: 70px;
background-color: red;
float: right;
margin-top: 70px;
margin-left: 10px;
margin-right: 20px;
}
I'd like to make a webpage like this:
|----------------------------|
| header |
|----------------------------|
| L | |
| e | |
| f | |
| t | |
| | |
| S | Content Area |
| i | |
| d | |
| e | |
| b | |
| a | |
| r | |
|----------------------------|
The header has a fixed height but it's width should be dynamic. The left-sidebar should have a fixed width but a dynamic height. For the content area, both height and width are dynamic. When user scale their browser, the scrolling bar should not appear(not set overflow:hidden; to hide it.).
I tried to write code like this:
<div class="top">
TOP
</div>
<div class="left">
LEFT
</div>
<div class="main">
MAIN
</div>
with CSS:
.top {
width: 100%;
height: 92px;
}
.left {
width: 178px;
height: 100%;
float:left;
}
.main {
float: left;
height: 100%;
width: 100%;
}
But it failed.
EDIT: Content Area and Left-SideBar must fill the whole browser window.....
I don't need
|----------------------------|
| header |
|----------------------------|
| L | |
| e | |
| f | |
| t | |
| | |
| S | Content Area |
| i | |
| d |----------------------|
| e |
| b |
| a |
| r |
|-----|
example at jsFiddle
.top {
position:absolute;
left:0; right:0;
height: 92px;
}
.left {
position:absolute;
left:0; top:92px; bottom: 0;
width: 178px;
}
.main {
position: absolute;
left:178px; top:92px; right:0; bottom:0;
}
Here is the simple code for you. Try this & know the quality CSS coding.
HTML:
<div class="main">
<div class="top">TOP</div>
<div class="left">LEFT</div>
<div class="right">MAIN</div>
<div class="clear"></div>
</div>
CSS:
.clear{
clear:both;
}
.main{
width:500px;
}
.top {
background: blue;
width:500px;
height: 92px;
}
.left {
float:left;
width: 150px;
background: red;
}
.right{
float:right;
width:350px;
background: yellow;
}
LIve demo
Hi now you just do easily as like this
Css
.top {
height: 92px;
}
.left {
width: 178px;
float:left;
}
.main {
margin-left:178px;
}
HTML
<div class="top">
TOP
</div>
<div class="left">
LEFT
</div>
<div class="main">
N content here MAIN content here MAIN content here </div>
Live demo
------------
Updated Demo
You just need to remove "float: left;" from your .main definition.
Also, when debugging positioning this really helps:
div {
border: 1px solid #000;
}
Also it might be worth dropping height: 100% from .left and .main to prevent vertical scrollbar
Demo : http://jsfiddle.net/nRQeA/
.top {
width: 100%;
height: 92px;
}
.left {
width: 20%;
height: 100%;
float:left;
}
.main {
float: left;
height: 100%;
width: 80%
}
You can also use display : table and display : table-cell to create a page that holds a table-level element with 2 table-cells (sidebar & content area)
<div id="outer-container">
<div id="sidebar"></div>
<div id="content"></div>
</div>
#outer-container {
display: table;
width: 100%;
height: 100%;
}
#sidebar {
display: table-cell;
width: 15%;
vertical-align: top;
}
#content {
display: table-cell;
width: 85%;
vertical-align: top;
}
A tutorial with a demo here : http://usefulangle.com/post/61/html-page-with-left-sidebar-main-content-with-css
I'm a newbie to css, but I've been familiar with html. I took over a website created by someone else who extensively used tables for web page placements. I'm redoing one page of the website, leaving out the tables. I'm making a comment on Lee's solution above in 2012. I made his solution work by adding "top:0;" as a property to the top css class. I figured I could do this since I note that left is also a property for the left css class in Lee's solution. I imagine Lee's solution, as is, was not working for me since there must be a conflict in the existing css file that was created by someone else.
I'm going round in circles with a CSS layout. I basically want it like:
<-------><-------------->
<------><------>
400px 50% 50%
So its 3 colums, one fixed size, and the other two taking up 50% each of the remaining space. I cant seem to make the second and third take up 50% of the remaining space.
Any help would be greatly appreciated,
thanks very much :)
I tried a couple of variations. Below works in Chrome 2, Firefox 3.5 and IE8:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html>
<head>
<title>NLR</title>
<style type="text/css">
html, body, div { margin: 0; border: 0 none; padding: 0; }
div { height: 500px; border-collapse: collapse; }
#wrapper { padding-left: 400px; }
#nav { width: 400px; margin-left: -400px; float: left; background: yellow; }
#main { overflow: hidden; background: blue; }
#left { float: left; width: 50%; background: red; height: 300px; }
#right { float: right; width: 50%; background: green; }
</style>
</head>
<body>
<div id="wrapper">
<div id="nav"></div>
<div id="main">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
the markup:
<div id="left">some content</div>
<div id="main">
<div>more content</div>
<div>still more content</div>
</div>
the css:
#left {
float: left;
width: 400px;
margin-right: -405px; /* throwing in a little extra */
}
#main {
margin-left: 405px; /* matching the margin of #left */
}
#main > div {
width: 50%; /* may need to make it 49.9% for some browsers */
}
Your best bet would be to have it set up like so:
Wrappers are pretty important and make a lot of things much easier. To center things inside of wrappers, you can set margin left/right of the divs inside of the wrappers to "auto".
<div class="bigwrapper">
<div class="400pxdiv">
Content for 400pxdiv
</div>
<div class="rightwrapper">
<div class="50percent1">
50percent1's content
</div>
<div class="50percent2">
50percent2's content
</div>
</div>
</div>
First of all it's always a good practice to WRAP your layout. In the following example:
+---------------BODY-----------------+
|<---DIV#1---><--------DIV#2-------->|
| <---DIV3--> | <--DIV4--><--DIV5--> |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | | | | |
| | | | |__________________| |
| |_________| | |____CLEAR DIV_____| |
+-----------------------------------+
DIV0 : main-wrapper
DIV1 : sidebar-wrapper
DIV2 : content-wrapper
DIV3 : sidebar-content
DIV4 : content-left
DIV5 : content-right
CLEAR DIV: to clear the floats.
This works for me in Firefox.
<!DOCTYPE html>
<title>Test</title>
<style>
#A { width: 400px; float:left; outline: thin solid pink; }
#B { margin-left: 400px; overflow: hidden; outline: thin solid pink; }
#B1, #B2 { width:50%; float:left; outline: thin solid pink; }
</style>
<div id=A>
A
</div>
<div id=B>
<div id=B1>
B1
</div>
<div id=B2>
B2
</div>
</div>