I have a the following:
<div class="container">
<div class="sectionA">
</div>
<div class="sectionB">
</div>
</div>
Section A has a red background, Section B has a blue background.
Section A has lots of text in it, making it quite tall, section B does not have much text in it.
How can I make it so that Section A and B are the same height as the parent?
Yes, you can give the childs the same heights as the parent. This will work:
<html>
<head>
</head>
<body>
<div class="container">
<div class="sectionA">Lorem ipsum dolor sit amet.
</div>
<div class="sectionB">Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>
The CSS:
.container{height:200px;width:500px;overflow:hidden}
.sectionA{position:relative;float:left;width:250px;background:blue;height:100%}
.sectionB{position:relative;float:left;width:250px;background:red;height:100%}
If you dont mind about using jquery,
$('.sectionB').css('height', $('.sectionA').outerHeight() );
sectionB css height is set by the sectionA outerHeight.
Take a look to this jsbin.
Hope this helps!
If you want to do this in dynamically, I think you need to use jquery/javascript to handle otherwise you can use height property. Use the suitable highest value for both sections.
Faux-Column Effect Using <div> and CSS
One way of doing this involves adding an extra element as follows:
<div class="container">
<div class="backdrop"></div>
<div class="sectionA">
<p>Text of A... can be on a red background.</p>
<p>Lorem ipsum dolor... and long text block.</p>
</div>
<div class="sectionB">
<p>Text of B... can be on a blue background.</p>
</div>
</div>
I am going to add an extra element <div class="backdrop">, which you could replace with an pseudo-element if so desired.
The appropriate CSS is as follows:
.container {
overflow: hidden;
color: white;
background-color: red;
position: relative;
}
.sectionA {
float: left;
width: 48%;
padding: 1%;
}
.sectionB {
float: left;
width: 48%;
padding: 1%;
position: relative;
z-index: 2;
}
.backdrop {
position: absolute;
background-color: blue;
width: 50%;
height: 3000px;
top: 0;
left: 50%;
z-index: 1;
}
The parent .container element is given the background-color for the left-hand side column (red), with overflow: hidden and position: relative.
The two child/column elements are placed using float: left, and given a relative width of 48% and padding of 1% (you can adjust these measurements as needed).
Finally, .backdrop is positioned absolutely and placed to the right hand side of the parent container. I set it to have a tall height to make sure that it stretches beyond any expected height of any of the two columns, and declare the background-color: blue.
Use z-index to move the floated .sectionB to be painted above .backdrop. Note that you need set position .sectionB relatively so that the z-index value takes effect.
Since .container uses overflow:hidden, the tall backdrop element is clipped so you can the effect that you want.
Using a background-image could also work. You could create a background image with the left hand side red and the right hand side blue, and tile it vertically with position top and center, just making the width is wide enough to accommodate any expected page width.
The main advantage of using div.backdropis that you can alter the color scheme using CSS properties alone without changing the background image.
Fiddle demo: http://jsfiddle.net/audetwebdesign/yejss/
Related
This question already has answers here:
Is there a way to make a child DIV's width wider than the parent DIV using CSS?
(15 answers)
Closed 5 years ago.
Is it possible to make an inner div always have a width of the full browser window regardless of its parent/s width settings and dimensions? I also want to make said div sit right on the left of the page, ie, left: 0 where zero is relative to the body element (not its parent div).
My playing around can make the inner div the correct width but the content below it moves up (doesn't sit underneath) and I still haven't figured out how to move the div left to 0.
And to make things harder; is it possible to do with CSS2 (not use CSS3)?
.full-page-width {
position: absolute;
left: 0;
right: 0;
width: 100%;
}
<div class="container">
<div class="row">
<div class="col-md-8">
<p>I should sit above Foo</p>
<div class="full-page-width">
<p>Foo</p>
</div>
<p>I should always sit below Foo</p>
</div>
</div>
</div>
Yes, if you want you can set in 2 ways that I know of:
First is using vw and vh
div{
width:100vw;//for width
height:100vh;//for height
}
Other solution is using position
div{
position fixed;
left:0;//for width
right:0;//for width
top:0;//for height
bottom:0;//for height
}
Simply use the view width unit:
div{
width: 100 vw;
}
https://www.w3schools.com/cssref/css_units.asp
For positioning, you will have to place it outside the container or use a negative margin.
You can do it with position:fixed:
html, body {
margin:0;
}
.container {
background: linear-gradient(to bottom, lightgreen, green);
height: 1000px;
width:200px;
}
.inner {
position:fixed;
width: 100%;
bottom: 0;
height: 50px;
background-color: lightblue;
}
<div class="container">
<div class="inner"></div>
</div>
I have a div containing some text that is left floated so it can appear to the right of an image, and they're all wrapped in a container. However, I can't make the text attach to the bottom of the container. If I use position: relative on the container and position: absolute; bottom: 0 on the div containing the text, which works in most cases, the text starts rendering over the image.
Here is what I have now:
http://jsfiddle.net/RWkjL/
In short, what I want is to make this:
To look like this:
... without knowing the text's width.
Thanks!
This can be achieved using vertical-align in CSS.
HTML
<div id="container">
<img src="http://www.purac.com/_sana_/handlers/getfile.ashx/5671e36e-6ba3-4ffc-9b58-8495cc024bfa/Sample-grey.png" />
<p id="text">
Lorem ipsum <br/>
dolor sit amet
</p>
</div>
CSS
#container {
height: 128px;
}
img, #text {
vertical-align:bottom;
display: inline-block;
}
Here is an updated JSFiddle.
You can read more about vertical-align here if you need more control over it. You can specify a specific length for the vertical align to be at as well, using any CSS length unit.
Edit: Because there's no more floating, you can drop the definition of the height of the container. It is also worth noting that setting overflow: hidden; on #container would also prevent the issue of 0 height in a parent element that has only floating children.
While randak's answer is totally correct, this is another solution to your problem:
#container {
height: 128px;
position:relative;
}
#picture {
float: left;
}
#text {
float: left;
position:absolute;
bottom:0px;
left:128px;
}
What I am trying to do is have a div element at a specific Y location, but floating to the left or the right (so that the other text on the page will flow around it). I can't seem to find the right combination of attributes..
position:relative;float:right works but the div is at the top of the containing element
position:relative;top:1in;float:right moves the div down, but the area that the text flows around is still at the top of the area, not the +1in area
position:absolute disables the float entirely
Here is a simple example:
<div style='position:relative;top:1in;float:right;border:0.1in solid;'>
<p>This is on the right</p>
</div>
<p>This is the text that should flow around the textbox. Make as long as needed...</p>
What I really want is regions but no browsers really support this yet.
Any ideas? Thanks..
If you want to offset a float from the top, with text flowing around it, you have to insert another zero-width float above it to achieve the offset. Like this: http://jsfiddle.net/YKYmj/7/
#floater {
float: right;
clear: right;
border: 1px solid gray;
background-color: #ccc;
margin: 10px;
width: 100px;
height: 100px;
}
.wrapper:before {
content: '';
float:right;
height:1in;
}
<div class="wrapper">
<div id="floater">In offset, floated box</div>
<p>Lorem ipsum dolor sit amet, consectetur ...
</div>
<div class='main_container' style='overflow:hidden; height:100%; height: auto !important; min-height:100%; width:100%;'>
<div class='float_left' style='width:100px; height:100%;'>
</div>
<div class='float_right' style='width:100px;'>
</div>
<div class='clear'></div>
<div class='content'>
//elastic content that sometimes makes the page longer or shorter
</div>
</div>
No matter how many tutorials or examples I looked at, nothing is helping me. I've tried many different combinations. As soon as I set main_container to a px height, the sidebars then, correctly, take up 100% of the height. But I can't set a px height for the main container.
EDIT:
example
The content box will not have a static height. So far what happens is that main_container adjusts it's height based on the content box, but the two sidebars don't adjust there height based on the main_containers height.
In addition to Adrift's answer, you are also overriding the height: 100% with the following height: auto !important - the latter overrides the height setting, even though it is not the source of the problem.
Here is a Gist that works on Chrome and most likely also on other modern browsers as well.
This solution uses CSS tables cells that allow the left/right sidebars to take on the height of the central .content panel.
The HTML:
<div class='main_container'>
<div class='left_bar'></div>
<div class='content'>
<p>Elastic content that sometimes makes the page longer or shorter</p>
<p>Lorem ipsum dolor sit amet, ...</p>
</div>
<div class='right_bar'></div>
</div>
The CSS:
.main_container {
display: table;
width: 100%;
}
.left_bar {
display: table-cell;
width: 100px;
background-color: lightgray;
}
.right_bar {
display: table-cell;
width: 100px;
background-color: lightgreen;
}
.content {
padding: 0 20px;
}
Demo Fiddle: http://jsfiddle.net/audetwebdesign/zahPD/
As suggested in other comments, you can specify height: 100% or height: inherit to .main_container as required in your application.
Reference for table-cell: https://developer.mozilla.org/en-US/docs/Web/CSS/display
Backwards Compatibility
Works with IE8 and above.
Div not supports height in percent using xhtml document. You use a trick like this:
.main_container{
position:fixed;
top:0;bottom:0;
right:0;left:0;
}
I've write an example here: http://jsfiddle.net/vF6fY/ take a look to it
I've successfully used the beautiful Susy grid system to create a responsive layout similiar to the one of WebDesignerWall.com:
What i failed to implement is a position:fixed sidebar.
Such a sidebar would not scroll when the page is scrolled and stays on the same place. That's fantastically convenient (anyway, you actually can't put more content into the sidebar, because it would clutter the top of page in a narrow window).
My layout goes crazy whenever i apply position:fixed to a column:
The colored blocks are declared three-column wide, but stretch further when position:fixed is applied to the sidebar..
I think the problem is that the width of the sidebar is relative, i. e. set in percentage. Due to position:fixed, the width is measured against the width of the browser window, not its container (though i set the container to position:relative).
The question is: how do i make a column fixed to the window while measuring its width against its container, not the viewport?
Maybe it's possible to fix the position of an element with JS?
PS I've tried the width: inherit solution, but it wasn't of any help to my situation.
The way to do it is with a second container. I don't know your exact code, but here's an example. Let's assume your structure is something like this:
<div class="page">
<header class="banner">
<h1>header</h1>
</header>
<nav class="navigation">
<ul class="nav-inner">
<li>navigation link</li>
</ul>
</nav>
<article class="main">
<h2>main content</h2>
</article>
<footer class="contentinfo">
<p>footer</p>
</footer>
</div>
The only important assumption I made there was ensuring an extra wrapper around my navigation sidebar. I have both the <nav> tag and the <ul> tag to work with. You can use any tags you want, as long as the sidebar has two that can be used for structure - the outer for a fixed container, and the inner for the sidebar itself. The CSS looks like this:
// one container for everything in the standard document flow.
.page {
#include container;
#include susy-grid-background;
}
// a position-fixed container for the sidebar.
.navigation {
#include container;
#include susy-grid-background;
position: fixed;
left: 0;
right: 0;
// the sidebar itself only spans 3 columns.
.nav-inner { #include span-columns(3); }
}
// the main content just needs to leave that space open.
.main { #include pre(3); }
// styles to help you see what is happening.
header, article, .nav-inner, footer {
padding: 6em 0;
outline: 1px solid red;
}
Cheers.
You can't, fixed-position elements are detached from their containers, position: relative or no position: relative. Just set its width to an absolute value - it looks like your content is always 760 pixels wide, right?
Maybe it's possible to fix the position of an element with JS?
Yes, but it will be tedious and isn't the ideal solution .
Instead, calculate the appropriate width using JavaScript and assign it, instead of using the percentage directly in CSS. Here's a basic outline:
function updateSize() {
var outer = document.getElementById("outercontainer"); //get the container that contains your sidebar
var navcol = document.getElementById("navcol"); //get the sidebar (which is supposed to have position: fixed;)
navcol.style.width = Math.floor(outer.offsetWidth * 45/100) + "px"; //or whatever your percentage is
}
updateSize();
window.onresize = updateSize; /*make sure to update width when the window is resized*/
Note: the IDs used above are just placeholders -- you will need to modify them to fit your actual page.
Why don't you just use math? =)
Example html:
<div class="container">
<div class="col">
<div class="fixed">This is fixed</div>
</div>
</div>
CSS
.container {
width: 80%;
margin: 0 auto;
}
.col {
float: left;
width: 33.3333333333%;
}
.fixed {
position: fixed;
width: 26.666666666%; /* .container width x .col width*/
}
position:fixed works like position:absolute so it isn't positioned in relation of its container. It simply floats into your document.
A quick fix would be something like this:
<div id="fixed-element" style="width:30%"> /* 30% of the document width*/
lorem ipsum dolor sit amet
</div>
<div id="faux-sidebar" style="width:30%; display:block"> /* 30% of the document, leave it empty, so it acts like a placeholder for the fixed element*/
</div>
<div id="the-rest" style="width:70%"> /* the rest of the website goes here */
more lorem ipsum than ever before
</div>