I am new to css.
I have made 2 div's. Both contain some text.
The first div is a box that will vary in width. I want the second box to always be 50px to the right of the first box, no matter what the width of the first box is.
How can I do this with css?
(I currently have the left box set as absolute positioning)
HTML:
<div id="box1">
<div id="box2"></div>
</div>
CSS:
#box1 {
position:absolute;
left:0; top:0;
width:200px; height:200px;
background:red;
}
#box2 {
position:absolute;
right:-150px; top:0;
width:100px; height:100px;
background:blue;
}
This solution only works if the width of the right DIV is fixed. In that case, set the right property to - ( width + 50 ) px. In my example, it's -150px.
Live demo: http://jsfiddle.net/simevidas/U47Ch/
Like this,
* {padding: 0; margin: 0;}
div {float: left; height: 100px;}
#left {padding: 0 50px 0 0; width: 100%;}
#right {position: absolute; right: 0; top: 0; width: 50px;}
<div id="left">
<div id="right">
</div>
</div>
This will do the trick.
I think this works with any length text in either column, in any size container:
<style type="text/css">
#left {padding-right:100px; float:left; display:inline; position:relative;}
#right {position: absolute; right: 0px; top: 0px; width: 50px; overflow:hidden;}
</style>
<div id="left">
<div id="right">
Lorem ipsum dolor sit amet, consectetur
</div>
Aliquam congue odio sed dolor rhoncus malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi condimentum elementum pellentesque.
</div>
Tested in FireFox only. The right padding of #left must always be width of #right plus 50.
<style type="text/css">
#divBox2 { margin-left: 50px; }
</style>
Margin simply adds 50px to the left of box2, meaning there will always be 50px of space left of box2, thus between box 1 and 2, also remove absolute positioning of box 1.
<div id="divBox1">
</div>
<div id="divBox2">
</div>
Related
I have four divs in the container, three of them are float and the last one is normal div without float. Why is my text div put beneath all three float divs and the height of my text div adds up all three float divs' height together? Theoretically，float elements are taken out from the element flow, so my text div should be placed on the very top of the container and it's height should just be the line height? please help me.
#fd
{
width:100px;
height:150px;
background-color:red;
float:left;
}
#sd
{
width:150px;
height:100px;
background-color:blue;
float:left;
}
#td
{
width:100px;
height:100px;
background-color:green;
float:left;
}
#container
{
width:300px;
height:500px;
background-color:darkgray;
}
#text
{
background-color:aqua;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="basic.css">
<title>Insert title here</title>
</head>
<body>
<div id=container>
<div id=fd></div>
<div id=sd></div>
<div id=td></div>
<div id=text>aaaaaaabbbbb</div>
</div>
</body>
</html>
As a simple illustration, consider your mark-up and the following CSS.
In CSS, the floated elements are first taken out of the flow and the regular content positioned.
Then the floated element are allocated space by wrapping the content around them such that the floated elements are placed as far left and as close to the top edge of the containing block as possible (taking into account other floated elements). The text/content wraps around the edges of the floated elements.
To get a full appreciation of the nuances, you need to read the CSS specification about how floats work.
Ref: http://www.w3.org/TR/CSS21/visuren.html#floats
In your example, because the floated elements are either wide enough or tall enough, the regular, inflow content starts below the bottom edge of the floated elements, which is as close to the top edge of the parent block that the content can appear after taking into account the dimensions of the floated elements.
.container {
width: 300px;
border: 1px dotted blue;
overflow: auto;
}
.floater {
float: left;
width: 50px;
height: 50px;
}
#fd {
background-color: red;
}
#sd {
background-color: blue;
height: 100px;
}
#td {
background-color: green;
}
<div class="container">
<div class="floater" id="fd"></div>
<div class="floater" id="sd"></div>
<div class="floater" id="td"></div>
<div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer facilisis velit ut neque tempor quis cursus tortor suscipit. Curabitur rutrum magna vitae arcu pharetra eget cursus ante accumsan. Nunc commodo malesuada adipiscing.</div>
</div>
First of all your container width is 300px and ur 3 divs are 350px wide.this means its overflowing or out of the container to push the text div.if that dosen't help Try Useing
z-index:9999;
position:absolute;
width:80%;
for text div
I'm not exactly sure what you're trying to achieve but if you place the text div at the top and then place a clearing element after it (before the three floated divs) you will end up with the text at the top. Although I did have to change the width of one of the divs to make them all fit in the 300px width container .. see below:
HTML
<div id=container>
<div id=text>aaaaaaabbbbb</div>
<br class="clear" />
<div id=fd></div>
<div id=sd></div>
<div id=td></div>
</div>
CSS
#fd {
width:100px;
height:150px;
background-color:red;
float:left;
}
#sd {
width:100px;
height:100px;
background-color:blue;
float:left;
}
#td {
width:100px;
height:100px;
background-color:green;
float:left;
}
#container {
width:300px;
height:500px;
background-color:darkgray;
}
#text {
background-color:aqua;
}
.clear {
float: none;
}
}
It's my first time designing a fluid layout and one of the things I'm trying to do is overlay a caption at the bottom of a photo. The method I'm using is having the photo (width:100%) inside a div (width:50%) and adding a div containing the caption under the photo. To get it to overlay, I made the caption's height a static 30px and set the position as relative and top -50px (+padding).
CSS:
#contentdiv {
width:50%;
}
#gallerydescription {
height:30px;
padding:10px;
background-image:url(../contentbkg.png);
position:relative;
top:-50px;
margin-bottom:-50px;
}
HTML:
<div id="contentdiv">
<img src="blog/1.gif" width="100%" />
<div id="gallerydescription">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
</div>
</div>
This does what I want visually, but it's not really a true fluid layout and it looks ugly if the caption is too or too short. Is there a way where I could let the length of the caption to determine the height of the caption div and have the "top" be the negative of whatever the height and padding is?
Pure CSS solution for a problem like the one you have
CSS
#contentdiv{
width: 50%;
position: relative;
}
#gallerydescription{
padding: 10px;
background-image: url('../contentbkg.png');
box-sizing: border-box;
-moz-box-sizing: border-box;
position: absolute;
bottom: 0;
width: 100%;
max-height: 60%;
overflow: hidden;
}
Markup (unchanged)
<div id="contentdiv">
<img src="blog/1.gif" width="100%" />
<div id="gallerydescription">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dictum urna nec urna varius varius.
</div>
</div>
Update
jsfiddle try this fiddle
Try this and see how it looks like:
#contentdiv {
width:50%;
position: relative
}
#gallerydescription {
height:30px;
padding:10px;
background-image:url(../contentbkg.png);
position:absolute;
left: 0; right: 0; bottom: 0;
z-index: 5;
}
You could try jQuery UI Position for that purpose.
It allows to position two elements relatively, like
$("#elementToPosition").position({
my: "left top",
at: "right bottom",
of: "#targetElement"
});
And then change the top property for overlaying :
$("#elementToPosition").css('top',$("#elementToPosition").css('top') - 10px);
I have seen a number of similar questions, but have not found an answer for what I am looking for. Further information is as follows:
I am using twitter bootstrap, so I would like a solution that is compatible with it
The layout will look like this. Sorry I cannot embed the image because I need 10 pts first.
This is as close as I have gotten so far. The problem is that I cannot get the sidebar to stop at the footer.
I will need the main content to expand the same as the sidebar.
The sidebar and Main Content are two different colors and vary in size. They must both extend to the footer
Notice that the minimum height must be 100%
The footer should move if the content grows too much (i.e. it would require scrolling to see it)
I do no want to use JavaScript, but if it is required I wouldn't mind a solution with so long as it is progressively enhanced with the JS (I am also using jQuery).
The page content is centered horizontally with a fixed width
I think this might be, what you are looking for: two column layout source.
The main idea is to set height: 100% on both <body> and <html> and then make sure that the container also takes up all the height (via min-height: 100%). You might notice that code also contains workaround for IE6, because it was originally written, when fighting IE6 was just another day of work.
This was made by modifying a bit more complicated and more often used holy grail layout source.
Via css it may be possible but need some tricks.
You need to make both divs/columns very very tall by adding a padding-bottom: 1000px and then "trick the browser" into thinking they aren't that tall using margin-bottom: -1000px. It is better explained via example below.
http://jsfiddle.net/mediasoftpro/Ee7RS/
Hope this will be ok.
You can try with display:table; to Parent Div and display:table-cell; to Child Div for achieving your results....
see the code :-
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
.container {
background:red;
width:600px;
display:table;
}
.left {
background:yellow;
width:200px;
display:table-cell;
}
.mid {
background:blue;
width:400px;
display:table-cell;
}
.right {
background:green;
width:200px;
display:table-cell;
}
</style>
</head>
<body>
<div class="container">
<div class="left">shailender</div>
<div class="mid">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
fff</div>
<div class="right">afdafaf</div>
</div>
</body>
</html>
Demo:- http://jsbin.com/ebucoz/13/edit
Read More About Fluid Width Equal Height Columns with Examples
Hey i think you want this
Css
**
.wraper, .header, .footer{
width:80%;
margin:0 auto;
overflow:hidden;
border:solid 2px red;
}
.header{
height:100px;
background:green;
border-color:darkred;
}
.sidebar{
width:20%;
background:yellow;
float:left;
}
.content{
width:70%;
background:pink;
float:right;
}
.footer{
height:100px;
background:blue;
border-color:black;
}
#container2 {
background: none repeat scroll 0 0 #FFA7A7;
clear: left;
float: left;
overflow: hidden;
width: 100%;
}
#container1 {
background: none repeat scroll 0 0 #FFF689;
float: left;
position: relative;
right: 75%;
width: 100%;
}
#sidebar {
float: left;
left:76%;
overflow: hidden;
position: relative;
width: 20%;
text-align: justify;
}
#content {
float: left;
left: 81%;
overflow: hidden;
position: relative;
text-align: justify;
width: 72%;
}
**
HTML
<div class="header">header bar </div>
<div class="wraper">
<div id="container2">
<div id="container1">
<div id="sidebar">
This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text here This is dummy text
</div>
<div id="content">
This is dummy text here This is dummy text here This is dummy
</div>
</div>
</div>
</div>
<div class="footer">Footer bar</div>
Live demo http://jsfiddle.net/rohitazad/Pgy75/2/
more about this click here http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm
The only real answer:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">
<table border="1" height="100%" width="100%">
<tr>
<td width="10%">
left
</td>
<td>
right
</td>
</tr>
</table>
Is such a thing possible using CSS and two inline-block (or whatever) DIV tags instead of using a table?
The table version is this (borders added so you can see it):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head></head>
<body>
<table style="width:100%;">
<tr>
<td style="border:1px solid black;width:100px;height:10px;"></td>
<td style="border:1px solid black;height:10px;"></td>
</tr>
</table>
</body>
</html>
It produces a left column with a FIXED WIDTH (not a percentage width), and a right column that expands to fill THE REMAINING SPACE on the line. Sounds pretty simple, right? Furthermore, since nothing is "floated", the parent container's height properly expands to encompass the height of the content.
--BEGIN RANT--
I've seen the "clear fix" and "holy grail" implementations for multi-column layouts with fixed-width side column, and they suck and they're complicated. They reverse the order of elements, they use percentage widths, or they use floats, negative margins, and the relationship between the "left", "right", and "margin" attributes are complex. Furthermore, the layouts are sub-pixel sensitive so that adding even a single pixel of borders, padding, or margins will break the whole layout, and send entire columns wrapping to the next line. For example, rounding errors are a problem even if you try to do something simple, like put 4 elements on a line, with each one's width set to 25%.
--END RANT--
I've tried using "inline-block" and "white-space:nowrap;", but the problem is I just can't get the 2nd element to fill the remaining space on the line. Setting the width to something like "width:100%-(LeftColumWidth)px" will work in some cases, but performing a calculation in a width property is not really supported.
See: http://jsfiddle.net/qx32C/36/
.lineContainer {
overflow: hidden; /* clear the float */
border: 1px solid #000
}
.lineContainer div {
height: 20px
}
.left {
width: 100px;
float: left;
border-right: 1px solid #000
}
.right {
overflow: hidden;
background: #ccc
}
<div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>
Why did I replace margin-left: 100px with overflow: hidden on .right?
A modern solution using flexbox:
.container {
display: flex;
}
.container > div {
border: 1px solid black;
height: 10px;
}
.left {
width: 100px;
}
.right {
width: 100%;
background-color:#ddd;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
http://jsfiddle.net/m5Xz2/100/
Compatible with common modern browers (IE 8+): http://jsfiddle.net/m5Xz2/3/
.lineContainer {
display:table;
border-collapse:collapse;
width:100%;
}
.lineContainer div {
display:table-cell;
border:1px solid black;
height:10px;
}
.left {
width:100px;
}
<div class="lineContainer">
<div class="left">left</div>
<div class="right">right</div>
</div>
You can use calc (100% - 100px) on the fluid element, along with display:inline-block for both elements.
Be aware that there should not be any space between the tags, otherwise you will have to consider that space in your calc too.
.left{
display:inline-block;
width:100px;
}
.right{
display:inline-block;
width:calc(100% - 100px);
}
<div class=“left”></div><div class=“right”></div>
Quick example: http://jsfiddle.net/dw689mt4/1/
I've used flex-grow property to achieve this goal. You'll have to set display: flex for parent container, then you need to set flex-grow: 1 for the block you want to fill remaining space, or just flex: 1 as tanius mentioned in the comments.
If you can't use overflow: hidden (because you don't want overflow: hidden) or if you dislike CSS hacks/workarounds, you could use JavaScript instead. Note that it may not work as well because it's JavaScript.
var parent = document.getElementsByClassName("lineContainer")[0];
var left = document.getElementsByClassName("left")[0];
var right = document.getElementsByClassName("right")[0];
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
window.onresize = function() {
right.style.width = (parent.offsetWidth - left.offsetWidth) + "px";
}
.lineContainer {
width: 100% border: 1px solid #000;
font-size: 0px;
/* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */
}
.lineContainer div {
height: 10px;
display: inline-block;
}
.left {
width: 100px;
background: red
}
.right {
background: blue
}
<div class="lineContainer">
<div class="left"></div>
<div class="right"></div>
</div>
http://jsfiddle.net/ys2eogxm/
When you give up the inline blocks
.post-container {
border: 5px solid #333;
overflow:auto;
}
.post-thumb {
float: left;
display:block;
background:#ccc;
width:200px;
height:200px;
}
.post-content{
display:block;
overflow:hidden;
}
http://jsfiddle.net/RXrvZ/3731/
(from CSS Float: Floating an image to the left of the text)
If, like me, you want something that will expand to the end of the line even if the left-hand box wraps, then JavaScript is the only option.
I'd make use of the calc feature to get this right:
Array.from(document.querySelectorAll(".right")).forEach((el) => {
el.style.width = `calc(100% - ${el.offsetLeft + 1}px)`;
});
.container {
outline: 1px solid black;
}
.left {
outline: 1px solid red;
}
.right {
outline: 1px solid green;
}
<div class="container">
<span class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique aliquet quam, at commodo lorem fringilla quis.</span>
<input class="right" type="text" />
</div>
A solution using grid layout and fractional units (fr):
/* For debugging and visibility */
html, body {
border: 2px solid navy;
}
.grid-layout {
border: thick solid sandybrown;
background-color: gray;
}
.grid-layout div:nth-child(odd) {
border: 2px solid brown;
background-color: azure;
}
.grid-layout div:nth-child(even) {
border: 2px solid red;
background-color: lightyellow;
}
/* Grid layout.
* Horizontal and vertical gaps.
* two columns, fixed and responsive.
* Note no containing div per line.
*/
.grid-layout {
display: grid;
gap: 4px 2px ;
grid-template-columns: 100px 1fr;
}
<p>How to make an element fill the remainder of the line?</p>
<p>Note no encompassing div per line.</p>
<div class="grid-layout">
<div>Lorem ipsum line 1</div>
<div>Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.</div>
<div>Lorem ipsum line 2</div>
<div>Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris
nisi ut aliquip ex ea commodo consequat.</div>
</div>
A similar solution with encompassing divs:
.lineContainer {
display: grid;
gap: 2px 4px;
grid-template-columns: 100px 1fr;
}
<p>Display grid per line.</p>
<div class="lineContainer">
<div style="border:1px solid black; ">
Lorem ipsum …
</div>
<div style="border:1px solid black; ">
Lorem ipsum dolor sit amet,
consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore
et dolore magna aliqua.
</div>
</div>
I have a header on my page which is just over 100px (111px to be exact)
The div below it needs to extend to the bottom of the viewport, as if i had set the bottom to 0px. The problem lies in the fact that i cannot specify top and bottom in ie6 (bug).
I can either specify top: 111px or bottom: 0px, but i still need the height to be correct ie. 100% -111px, according to the size of the viewport.
Can't seem to get expressions working coz that seems to be the solution
Here's my css code:
position: absolute;
width: 200px;
top: 111px;
bottom: 0px;
Any suggestions?
The best way to do this is to use view port styles. It just does the work and no other techniques needed.
Code:
div{
height:100vh;
}
<div></div>
I added the height property to the body and html tags.
HTML:
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
CSS:
html, body
{
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#wrapper
{
height: 100%;
min-height: 100%;
}
#header
{
height: 111px;
}
Alternatively, you can just use position:absolute:
#content
{
position:absolute;
top: 111px;
bottom: 0px;
}
However, IE6 doesn't like top and bottom declarations. But web developers don't like IE6.
div{
height:100vh;
}
<div></div>
Now with css3 you could try to use calc()
.main{
height: calc(100% - 111px);
}
have a look at this answer:
Div width 100% minus fixed amount of pixels
div{
height:100vh;
background-color:gray;
}
<div></div>
I'm guessing that you are trying to get sticky footer
Negative margins of course!
HTML
<div id="header">
<h1>Header Text</h1>
</div>
<div id="wrapper">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
ullamcorper velit aliquam dolor dapibus interdum sed in dolor. Phasellus
vel quam et quam congue sodales.
</div>
</div>
CSS
#header
{
height: 111px;
margin-top: 0px;
}
#wrapper
{
margin-bottom: 0px;
margin-top: -111px;
height: 100%;
position:relative;
z-index:-1;
}
#content
{
margin-top: 111px;
padding: 0.5em;
}
100vh works for me, but at first I had used javascript (actually jQuery, but you can adapt it), to tackle a similar problw.
HTML
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
</body>
js/jQuery
var innerWindowHeight = $(window).height();
var headerHeight = $("#header").height();
var contentHeight = innerWindowHeight - headerHeight;
$(".content").height(contentHeight + "px");
Alternately, you can just use 111px if you don't want to calculate headerHeight.
Also, you may want to put this in a window resize event, to rerun the script if the window height increases for example.