I have a layout with a header bar that is 100% width and footer that is 100% width, but the content is centered and only say 800px wide.
I am attempting to make text float justified to the content area upon window stretch, but can't figure the best way to to this.
EXAMPLE
I've tried absolute positioning and relative positioning within the header div but when the window stretches, I either get the text 1 staying in the same spot, or it completely left justifies within the text 1 bar.
Thanks in advance
You can try this
You can remove width: 100% as its block element it will take full width.
And add one more div inside header and footer with width: 800px and margin: 0 auto
to center the inner content.
HTML
<div class="container">
<header> <div class="cnt">Header Text</div> </header>
<div class="content">
Div content......
</div>
<footer><div class="cnt">Footer Text</div> </footer>
</div>
CSS
.container{
height:100%;
}
header,footer{
height:50px;
border:1px solid red;
}
.cnt,
.content{
width:800px;
height:100%;
border:1px solid blue;
margin: 0 auto;
}
Is this what you are expecting:
HTML:
<div class="container">
<header> <div class="content">Header Text</div> </header>
<div class="content">
Container Text
</div>
<footer> Footer Text </footer>
</div>
CSS:
.container{
width:100%;
height:100%;
}
header,footer{
width:100%;
height:50px;
border:1px solid red;
margin:0;padding:0;
}
.content{
width:100%;
height:100%;
border:1px solid blue;
text-align:justify;
}
Fiddle Demo
HTML:
<div class="container">
<header> <div class="content">Header Text</div> </header>
<div class="content">
Container Text
</div>
<footer> <div class="content"> Footer Text</div> </footer>
</div>
CSS:
.container{
width:100%;
height:100%;
}
header,footer{
width:100%;
height:50px;
border:1px solid red;
margin:0;padding:0;
}
.content{
width:800px;
height:100%;
border:1px solid blue;
text-align:justify;
}
Related
I am having some trouble understanding why some of my DIVs are not expanding to my "content" DIV's height. It has to be css/html only.
VISUAL IMAGE (IMGUR)
HIERARCHY
-[+]wrapper
----[-]left (will contain navigation bar)
----[-]right (used just to center the "center" div, may have content)
----[-]center (center of page containing content)
--------[o]header (will only have small line of text)
--------[o]content (when height overflows, it should expand all other heights)
----[-]footer (resource & contact links, should always be at the bottom)
CSS
*{
font-family: Arial Black,Arial Bold,Gadget,sans-serif;
font-size: 12px;
font-style: normal;
font-variant: normal;
font-weight: 400;
border:0px;
margin:0px;
padding:0px;
}
.wrapper{
position:absolute;
width:100%;
height:100%;
background-color:black;
}
.left{
position:absolute;
left:0px;
width:220px;
height:100%;
background-color:red;
}
.right{
position:absolute;
right:0px;
width:220px;
height:100%;
background-color:blue;
}
.center{
position:absolute;
right:220px;
left:220px;
background-color:yellow;
}
#header{
float:left;
height:40px;
width:100%;
background-color:silver;
}
#footer{
position:absolute;
bottom:0px;
height:20px;
width:100%;
background-color:silver;
}
#content{
float:left;
top:40px;
bottom:20px;
margin:20px;
background-color:orange;
}
HTML
<body>
<div class="wrapper">
<div class="left">
</div>
<div class="right">
</div>
<div class="center">
<div id="header">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
</div>
</body>
Here is my jfiddle: JFIDDLE
you set .wrapper div's position:absolute, and height 100%;,so it only take the height of container in which he is,(that's how absolutely positioned elements work)
the problem is i think you are over-using absolute positions a little bit,see its a powerful tool but not that good for layout compositions , you can use either the float base layout, or in-line blocks or flex layouts
flex will work like
.wrapper {
display: flex;
}
.left {
flex-grow: 1
}
.right {
flex-grow: 1
}
.content {
flex-grow: 3
}
but you have to put footer out of the wrapper or you can add an other child div like
<div class="wrapper">
<div class="main">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<div>
<div id="footer"></div>
</div>
now just add the flex property to main, and flex grow to childrens
remember flex work on rations , the above css means the .contnet dive will take 3 times the width of .lef or .right div
i.e 20% width for left, 20% width for right, 60% width for center,
.row {
display: flex; /* equal height of the children */
}
.col {
flex: 1; /* additionally, equal width */
padding: 1em;
border: solid;
}
<div class="row">
<div class="col">Lorem ipsum dolor</div>
<div class="col">Lorem ipsum dolor sit amet</div>
</div>
Refer this link you will get the solution for it or if you don't want to use css then go for Javascript. Refer this jquery plugin for that purpose - jquery-match-height
I have problem with fixed element, I wan't to set her width 100% relative to the second parent div .container
http://jsfiddle.net/q7wcam7x/2/
HTML
<div class="container">
<div class="header">
<div class="fixed">
!
</div>
</div>
</div>
CSS
.container{
width:300px;
position:relative;
margin:auto;
}
.header{
position:relative;
border:1px solid red;
height:300px;
}
.fixed{
position:fixed;
width:inherit;
height:10px;
background-color:blue;
}
This isn't possible with position:fixed, because fixed positioning is relative to the viewport (or the "screen").
However, this could be done with position:absolute, which causes the element to position itself relative to the closest parent that has the position property set on it:
http://jsfiddle.net/q7wcam7x/6/
HTML:
<div class="container">
<div class="header">
<div class="fixed">
dasdasdasdadddddddds
dsa
asdd
asd
</div>
</div>
</div>
CSS:
.container{
width:300px;
position:relative;
margin:auto;
}
.header{
border:1px solid red;
height:300px;
}
.fixed{
position:absolute;
width:100%;
height:10px;
background-color:blue;
}
If the above is not what you're looking for, maybe this will help you find a solution to your problem:
http://jsfiddle.net/q7wcam7x/7/
HTML:
<div class="container">
<div class="stickyHeader">THIS IS A HEADER</div>
<div class="scrollableContent">SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>SCROLLABLE CONTENT
<br/>
</div>
</div>
CSS:
.container {
width: 200px;
height: 150px;
overflow:hidden;
border: gold solid 2px;
}
.stickyHeader {
height: 20px;
background: white;
}
.scrollableContent {
height: 130px;
overflow: auto;
}
try this:
.fixed{
position:fixed;
left: 0;
right: 0
width:inherit;
height:10px;
background-color:blue;
}
I have a two column layout with one fixed column and one column of variable size with a min-width and a max-width. The columns should be flush with each other so there is no space.
An image of what I'm looking for http://imgur.com/RQXXaoz
Here's what I tried
JsFiddle: http://jsfiddle.net/49krdtf6/4/
.superOuter
{
background-color:#C0C0F0;
padding:20px;
text-align:center;
}
.outer
{
display:inline-block;
padding:20px;
background-color:#F0C0C0;
}
.test
{
overflow:hidden;
min-width:100px;
max-width:400px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test2">
Fixed content
</div>
<div class="test">
Rest with BFC
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test2">
Fixed Content
</div>
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div>
</div>
</div>
The problem I'm having is that my variable width column will not grow to it's max-width and is stuck at the width determined by its content.
You can use display table and table-cell to achieve this. Another difference is to discard max-width and go for just width instead.
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
padding:20px;
text-align:center;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
UPDATE
After discussing in the comments, I believe you actually have a limit for both columns width, one being 400px and the other, 800px.
Something like this:
* {
box-sizing:border-box;
}
.superOuter {
width:100%;
text-align:center;
padding:20px;
background-color:#C0C0F0;
}
.outer {
display:table;
width:100%;
padding:20px;
background-color:#F0C0C0;
}
.fixed {
display:table-cell;
width:400px;
padding:20px;
background-color:#F0F0F0;
}
.fluid {
display:table-cell;
width:800px;
padding:20px;
background-color:#F0F0C0;
}
<div class="superOuter">
When there's not enough content:
<br />
<div class="outer">
<div class="fixed">Fixed content</div>
<div class="fluid">Rest with BFC</div>
</div>
</div>
jsFiddle demo
Is this what you are looking for?
https://jsfiddle.net/retr0ron/
What I've done here is rearranged your content in the HTML-document (notice that there can't be whitespace between the divs where I removed it, otherwise you will see a small gap between them (because of how inline-elements behave).
HTML:
<div class="superOuter">
When there's not enough content:<br>
<div class="outer">
<div class="test">
Rest with BFC
</div><div class="test2">
Fixed content
</div>
</div>
</div>
<br><br>
<div class="superOuter">
I want it to look like this (that is unless the page shrinks)<br>
<div class="outer">
<div class="test">
Larger text here and it makes the whole thing go to the big size which is what I want without all the text
</div><div class="test2">
Fixed Content
</div>
</div>
</div>
CSS:
.outer
{
max-width:600px;
min-width: 380px;
padding:20px;
background-color:#F0C0C0;
margin:0 auto;
}
.test
{
overflow:hidden;
min-width:100px;
background-color:#F0F0F0;
padding:20px;
}
.test2
{
float:right;
width:200px;
padding:20px;
background-color:#F0F0C0;
}
how do i make divs display at the bottom of the screen inline (following each other horizontally like facebook chat) and also overlapping their parent div. i have tried the following but does not work.
<div id="container">
<div id="box">
</div>
<div id="box">
</div>
<div id="box">
</div>
</div>
#container{
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
#box{
border:1px solid blue;
width:250px;
height:300px;
display:inline-table;
position:fixed;
bottom:0;
}
Wrap the elements in another container div, which is positioned absolutely.
Firstly, you can't use duplicate id's. Use classes instead.
Your HTML will be something like:
<div id="container">
<div class="box-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</div>
You can't use display:inline-table and fixed together. Use position:absolute or position:fixed (if you want to make the items stick) for the container div, and for instance display:inline-block for the .box elements to get them inline.
#container {
height:10px;
position:fixed;
bottom:0;
width:1000px;
margin:0 auto;
}
.box-container {
position:absolute;
bottom:0;
height:40px;
width:100%;
}
.box{
border:1px solid blue;
width:250px;
height:40px;
display:inline-block;
}
See http://jsfiddle.net/B228U/1/ for an example.
Cheers,
Jeroen
You can´t give same id to different elements. Use class. Also give main div position:relative and float:left to rhe class box. Like this:
<div id="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
#container{
height:10px;
position:absolute;
bottom:0;
width:1000px;
margin:0 auto;
}
.box{
border:1px solid blue;
width:250px;
height:300px;
float:left;
display:inline-table;
position:relative;
bottom:0;
}
http://jsfiddle.net/7kwLc/
I am trying to make my logo and manu bar to follow my page as i scroll down the page,
Currently this is what i have.
CSS is;
html,body {
background-image:url(../img/background.png);
background-size:cover;
background:fixed;
}
#bar {
margin-top:55px;
width: 1920px center;
height: 30px;
background: #2E2E2E;
border: 3.2px groove #FFD700;
}
#logo {
position:absolute;
background-image:url(../img/LOGO1.png);
background-size:150px;
width:150px;
height:150px;
margin:0 auto;
z-index:1;
top:0px;
margin: 0 auto;
left:0px;
right:0px;
}
#middle
{
height:10000px;
}
and for HTML:
</head>
<body>
<div id="logo">
</div>
<div id="bar">
</div>
<div id="middle">
</div>
</body>
</html>
So please what would i need to change to make both 'bar' and 'logo' follow my scroll.
thankyou for you help
Here is a jsfiddle with how I would do it...
http://jsfiddle.net/2Zqhw/
I've wrapped both elements in a div, gave it position:fixed and width:100%
You need a div to wrap your logo and bar and use CSS to set the position to fixed.
The CSS:
#nav-fixed {
position:fixed;
}
The HTML:
<div id="nav-fixed">
<div id="logo">
</div>
<div id="bar">
</div>
</div>
You could try nesting logo and bar within another div and then setting position:fixed on the enclosing div so your HTML would look something like:
<div id="fixed_bar" style="position:fixed;">
<div id="logo"/>
<div id="bar"/>
</div>
<div id="middle">
</div>
Or you could add the enclosing div as above but define the style for it in the CSS:
#fixed_bar
{
position:fixed;
}
With the HTML:
<div id="fixed_bar">
<div id="logo"/>
<div id="bar"/>
</div>
<div id="middle">
</div>