I have code like this
<div class="container">
<div class="section">
<div class="left">
a profile pic and some text
</div>
<div class="right">
a wider div with much more text and some bio info
</div>
</div>
i would like a dotted border in between the two divs to separate the left column from the right. my problem is that no matter if i put the border on the left column or the right column it doesn't stretch to the bottom. if either column is shorter/longer than the other the border always stops before reaching the bottom looking cut off.
Try this:
html,body,.container, .section, .left, .right{height:100%}
.left, .right {border:1px dotted black;float:left;}
example: http://jsbin.com/agaza5
Make both your left and right divs stretch the full height of the container (section).
.left{ height:100%; }
.right{ height: 100%; }
I would set the height of your section div and then just set the children heights to 100%.
Check it out
Set the height property equally for both divs columns using CSS:
.left {
border:1px solid #ccc;
height:100px; /* you can use "100%" too, if you want */
}
.right {
height:100px; /* you can use "100%" too, if you want */
}
You can also use the min-height attribute if you want to create the same minimum height for both divs, but let only one div stretch further if its content grows.
I would also add that you should use more semantic names for your divs. What if one day you decided to move your left column and it was no longer on the left? You would have to rename everything!
Related
My pages are structured as nested divs. They have padding and margin so inner divs are typically physically smaller than outer divs. However, in some cases I would like one of the inner divs (red box in the image below) to expand widthwise to match the left and right edges of the outermost div.
<div id="div-a">
<div id="div-b">
<div id="div-c">
<div id="div-d">
</div>
</div>
</div>
</div>
This is just an example -- the number of nested divs can vary. The width of the outermost div is variable. The heights of all the divs are also variable.
I have tried using absolute positioning, but this removes div-d from the document flow. Since I don't know the height of its content, I can't compensate. Any other suggestions? Thank you for any help.
#div-a {
position:relative;
}
#div-d {
position:absolute;
left:0;
right:0;
}
Could this approach be a solution?
#div-c {
position:relative;
}
#div-d {
position:absolute;
padding:0 -(div-c + div-b + div-a padding values) 0 -(div-c + div-b + div-a padding
values)}
#div-c {
display: flex;
align-items: center;
}
#div-d {
width: calc(100% + PADDINGS + BORDERS);
}
PADDINGS: sum of each parents divs padding.
BORDERS: sum of each parents borders.
Unfortunately I could not find a CSS-only solution for my particular problem. I had to resort to Javascript.
wrap the div that needs to be full-width with another div
<div id="div-a">
<div id="div-b">
<div id="div-c">
<div id="div-d-wrapper">
<div id="div-d">
</div>
</div>
</div>
</div>
</div>
use this CSS
#div-a {
position:relative;
}
#div-d {
position:absolute;
left:0;
right:0;
}
apply the following Javascript (using jQuery)
$('#div-d-wrapper').height($('#div-d').outerHeight());
div{
padding:10px;
border: 1px solid red;
}
#div-d{
margin-left:-32px;
margin-right:-32px;
}
i used hard code values to for the given div . My solution is to use Negative margins in css. When the div grows dynamically, you use javascript or jquery to find parent reach from child div and calculate the margins accordingly.
fiddle demo: https://jsfiddle.net/bqrxtLvd/
Source:
Negative margin css tricks
Detailed negative margin
The following layout 2 column layout will get screwed up by adding the <p>Hello</p>... Can anyone give me a clue?
<div style="width:1280px; font-size:0;">
<div style="width:640px; height:200px; background:blue; display:inline-block;">
<p>Hello</p>
</div>
<div style="width:640px; height:200px; background:yellow; display:inline-block"></div>
</div>
I could see if the height of the "p" was actually larger than 200px, but it isn't. So why doesn't it just go inside of its parent and stop messing with my layout?
To fix this, I ended up making the layout column divs relative, and using the absolute position on a child div that would be the container of the "p", but it seems like there is something obvious I am missing to make this situation simpler...
Inline-block does leave some whitespace that is undesired most of the time do to spaces in your code. The best solution I think is to float it and use 50% for the width.
div {
float: right;
width: 50%;
height: 200px;
background:blue;
}
the p tag will go in nicely.
example here on jsfiddle
other solutions and information here http://css-tricks.com/fighting-the-space-between-inline-block-elements/
Inline block items are vertically aligned as baseline by default. Add vertical-align:top
Jsfiddle Demo
div {
font-size:0; /* remove whitespace */
}
div div {
font-size:1rem; /* reset font-size*/
vertical-align: top;
}
I have up to 4 divs on the page that will have to 'sit next to' each other horizontally. Each div will have 100% width.
All, but the first one, will therefore appear off the page until I style it otherwise (ultimately using jQuery).
How can I style the divs in order to achieve this?
Markup:
<div class="wrapper">
<div class="panel">
</div>
<div class="panel">
</div>
<div class="panel">
</div>
<div class="panel">
</div>
</div>
What I've Tried
I've tried floating all of the divs left and setting the overflow of 'wrapper' to hidden. I've tried setting the display to inline-block of all the divs. I've tried position absolute on all the divs. I'm trying a combination of different things just hoping it'll work but there has to be a proper approach to this.
Tell me if some like this is what you want i use display:inline-block
http://jsfiddle.net/fdXLb/
Then i can do a better explanation.
if one div has a width of 100% there will be no space for another div to align next to this one.
so I would say to align them use only 20% width.
25% works also for 4 divs but then you can not use any borders, margin or padding.
also you can set a min-width in px.
have a look at this example: http://jsfiddle.net/3CpL8/
may it helps
.wrapper > div {
width:20%;
background-color:orange;
height:60px;
float:left;
min-width:100px;
margin:5px;
}
A nice trick is to use white-space: nowrap; to prevent divs moving to the next line. This is what your css would look like:
.wrapper {
white-space: nowrap;
overflow-x: hidden;
}
.wrapper > div {
width:100%;
background-color:red;
height:60px;
display: inline-block;
min-width:100px;
margin:5px;
}
Check out this Fiddle and use your browser's inspector it to see that the divs are still there, but off screen at the width you want. I assumed you'd want to continue using overflow-x: hidden; on the parent div so there wouldn't be an ugly scrollbar when doing the javascript side :)
I have a fixed width 960px container and I am adjusting my design to fit various screen resolutions. Within the container, I have a few floating DIVs using width % and min-width like:
width:80%;
min-width:200px;
The issue here is that the DIVs do not line up horizontally; they end up underneath each other. Previously, I had my DIVs on a set width (which I changed to min-width now).
An example of how I have formed DIVs currently:
Container:
width: 830px;
float: left;
1st-colum:
width:100%;
min-width: 200px;
float: left;
2nd-colum:
width:100%;
min-width: 200px;
float: left;
3rd-colum:
width:100%;
min-width: 200px;
float: left;
etc.
In this example, the 1st-colum DIV covers the entire width of the container and pushes the other DIVs down.
Example of HTML below:
<div id="container">
<div id="1stcolum">Hello world</div>
<div id="2ndcolum">Hello world</div>
<div id="3rdcolum">Hello world</div>
</div>
As you can see, nothing fancy in the HTML either.
Based on your posted CSS and HTML..
You can't have 3, left floating, divs all taking up the same 100% width unless they stack. This is why the divs stack. Column one takes up 100% of the width, there's no room for column two to also take up 100% of the width unless column two falls below column one.
If you want the columns to actually be columns, you need them to have a width of 33.3%. (one-third of 100%)
And, if you want the columns to be a minimum of 200 pixels wide you don't need a min-width for each column, you simply need a min-width of 600px for the container div.
DEMO
I want to make a web page that uses 100% of screen space. I have two divs:
1st - menu with fixed width (~250px)
2nd - whats left
The misleading part for me is that the menu div is not in the 2nd div. They both are in a wrapper div (100% width). The problem is that if I write 100% width for the 2nd div, it goes below the menu. If I write less %, I cannot be sure how it will be displayed in smaller resolutions.
Is there is some negative sizing or something? ATM. 1st div floats left and 2nd div float right.
UDPATE: here is some code:
div.main {
width: 100%;
}
div.1st {
width: 250px;
float: left;
}
div.2nd {
width: 100%; #here should be the space that is left in the main div#
float: right;
}
<div class="main">
<div class="1st">menu</div>
<div class="2nd">content</div>
</div>
Problem: content could be as wide as it needs to so if string or objects in it is big enough 2nd div goes below 1st. Menu width is fixed.
UPDATE #2: if i leave content width empty then it will also goes below menu since content is wide enough
Take a look at this Post, there you have the correct solution:
http://www.alistapart.com/articles/holygrail
You could do something like this : http://jsfiddle.net/steweb/78x8y/
markup:
<div id="container">
<div id="left">Width=> 250px, float left</div>
<!-- following div takes automatically the remaining width, no need to declare further css rules -->
<div id="remaining">Width => the remaining space</div>
</div>
css:
#container{
width: 100%;
float:left;
overflow:hidden; /* instead of clearfix div */
}
#left{
float:left;
width:250px;
background:red;
}
#remaining{
overflow: hidden;
background:#DEDEDE;
}
Yes, you can determine the width of absolutely positioned elements by setting left and right. This makes the browser solve the equation in the standard for width. See this demo for an example.