I have the following HTML structure
<div id='parent'>
<div id='child-1'>Some text goes here</div>
<div id='child-2'>Different text goes here</div>
<div class='clear'></div>
</div>
I also have the following CSS
#parent {
width: 800px;
position: relative;
}
#child-1 {
width: 500px;
float: left;
}
#child-2 {
width: 200px;
float: left;
}
.clear {
clear: both;
}
Now, the contents of the child DIVs (child-1 and child-2) could be anything, so eventually child-1 might have longer height than child-2, or child-2 might have a longer height than child-1.
What I want to do, is have a vertical line between child-1 and child-2, and this line has the length of the DIV that is of longer height. I tried border on both DIVs, (right border for child-1 and left border for child-2), but this is not a good idea, because the line will appear thick where the two DIVs touch each other and then thin for the extended part.
How can I do that? I also like to use CSS only if possible, no jQuery nor JavaScript. If you think extra DIVs are needed then this is OK though.
Thanks.
I tried border on both divs, (right border on child-1 and left border on div-2, but this is not a good idea, because the line will appear thick where the two divs touch each other and then thin for the extended part.
That's a good way to go, actually. The final step, though, is to give the right div a negative left margin of 1px (assuming the border is 1px wide), so that the two borders overlap.
#child-1 {
width: 500px;
float: left;
border-right: 1px solid gray;
}
#child-2 {
width: 200px;
float: left;
border-left: 1px solid gray;
margin-left: -1px;
}
Another option is to use display: table on the parent and then display: table-cell on the columns, and then have a single border line between them.
The simple one:
elements {
border-left: black solid 1px;
}
elements:nth-child(1) {
border-left: none;
}
try to use
border-left:1px solid #color;
margin-left:2px;
and
border-right:1px solid #color;
margin-right:2px;
You could also give border-right: 1px solid #000; only to your first div if this div is longer than second div and if second div is longer you could assign border-left: 1px solid #000; only to your second div.
Related
On my site I have added a border-left to the sidebar. The issue I have is that this border is very close to the text to the left of it and I would like to move the border slightly to the right. I have tried various ways of doing this, but all were unsuccessful.
.blog-sidebar {
width: 250px;
border-left: 1px solid #000000;
}
Have you tried adding a margin on the left-hand side? For example:
.blog-sidebar {
width: 250px;
border-left: 1px solid #000000;
margin-left: 20px;
}
That should give you some space between the border and the content on the left.
For reference, see the CSS box model
http://www.w3schools.com/css/css_boxmodel.asp
I have two divs contained within a larger div and I'd like them to be laid next to each other. My approach was to float the first div left and set Overflow: hidden on the containing div.
For some reason it's not working and the 2nd div ends up ontop of the first.
Herse is the demo, http://jsfiddle.net/9xmDP/. I have some color coding which I was using to try and debug the overlapping. The code is also below. The signup form should be next to the login form instead of on-top of it.
HTML
<div id="container">
<div id="signupDiv">
<div id="signupLabel">
SignUp
</div>
<form id="signupForm">
User <input type="text" name="user"><BR/>
</form>
</div>
<div id="loginDiv">
<div id="loginLabel">
Login
</div>
<form id="loginForm">
User <input type="text" name="user"><BR/>
</form>
</div>
CSS
#container{
overflow: hidden;
}
#signupLabel{
border: solid black 1px;
width: 300px;
}
#signupDiv{
float:left;
}
#loginLabel{
border: solid red 1px;
width: 300px;
}
#loginDiv{
width: 300px;
border: solid pink 1px;
}
Try this css. fiddle here
#container{
width:604px;
}
#signupLabel{
border: solid black 1px;
width: 300px;
}
#signupDiv{
float:left;
width:300px;
}
#loginLabel{
border: solid red 1px;
width: 300px;
}
#loginDiv{
width: 300px;
float:left;
border: solid pink 1px;
}
You need to float:left #loginDiv as well. See your updated fiddle here:
http://jsfiddle.net/9xmDP/2/
When you float an element, it is removed from the normal content flow, and any content in its parent element and other children of the parent tries to wrap around it.
So the signupDiv is indeed floated to the left, which puts it on top of the non-floating loginDiv. The content in the loginDiv does try to wrap around the signupDiv, but since you've specified both elements to be 300px wide, there's no room for it, and so it must go below the floating div instead.
The simplest solution is to float both divs, like this:
#signupDiv, #loginDiv {
float: left;
}
You can place the divs next to each other, by making them both float.
If you make the container 605px, then the divs will fit in there (including the border)
#container{
width: 605px;
overflow: hidden;
}
And this
#loginDiv{
float: left;
width: 300px;
border: solid pink 1px;
}
Diplay:inline will also do the trick here..
http://jsfiddle.net/9xmDP/4/
#loginDiv{
width: 300px;
border: solid pink 1px;
display:inline-block;
}
I have to divs floated, one is on the left, the other on the right. What i want to do (without js) is that the right div fills the available space (width: 100%). The problem is, that the left div has an dynamic width, else I could simply use margin-left.
I also tried display: table-cell; but that won't allow me to use margin, only border-spacing.
Any suggestion?
You can probably do it like this, works in IE8 and better, in FF, in Safari. You could use padding instead of margin, as in this example:
<style>
.c_0 {
display: table;
width: 100%;
border: 4px solid orange;
}
.c_1 {
display: table-cell;
width: 20%;
border: 1px solid red;
padding-right: 20px;
}
.c_2 {
display: table-cell;
border: 1px solid blue;
}
</style>
<div class="c_0">
<div class="c_1">
has a width and padding instead of margin
</div>
<div class="c_2">
has the rest
</div>
</div>
EDIT
This only works with "%" on the first row. I saw it too late, that you want pixels.
I searched for this but I can't seem to find a similar case that had an answer to it. Sorry if it has been addressed previously.
I have a section of a html page that looks, on a basic level, like this:
<div id=wrap>
<div id=lb>
Content
</div>
<div id=rb>
Content
</div>
</div>
These basically break up my body into a left section (LB) and a right section (RB).
With corresponding CSS (Not showing a CSS Reset, but a generic one is in use as well; ... indicate other code is present but N/A):
#bwrap {
width: 100%;
height: 400px;
display:inline-table;
...
}
#lb {
width: 71.5%;
display: table-cell;
...
}
#rb {
width: 28.5%;
display: table-cell;
padding: 30px 6px 7px 6px;
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
}
I started right to left and filled in content in #RB; everything was perfect. However as soon as I started working in #LB I noticed that all my content within #RB shifted down to line up with the bottom of #LB's content. Even though the content nor the DIV overlaps.
The specific content that did this was a google calendar embed into #LB.
Everything looks completely normal except the shift down in #RB.
Anyone know where I went wrong? I tried to mess with floats and absolute positioning but none of it had any effect, most of it actually made the situation worse.
Use this
vertical-align: top;
Live example http://jsfiddle.net/wfyVy/
It's jumping down because the extra padding and border you have defined to rb is adding to the overall width of the container, making it no longer 28.5%. Try this:
#lb {
width: 70%;
display: table-cell;
...
}
#rb {
width: 20%;
display: table-cell;
padding: 30px 6px 7px 6px;
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
oveflow:hidden;
}
Update: if changing it to the css above is not enough, try adding a float: left to both ids above.
When you use paddings in elements with width % values, the paddings adds to the width value. Try reducing a little bit the width to get a correct proportion.
Don't use display: table-cell, it's ugly and doesn't work consistently on all browsers, You should be able to do fine with floats and widths.
Also using padding or margins on the same element as an element that has a width defined is not a good idea, again browser incompatibilities make it a nightmare to work with.
I suggest you do something like:
<div id="wrap">
<div id="lb">
content
</div>
<div id="rb">
<div id="rp">
more content
</div>
</div>
</div>
with css:
#wrap {
width: 100%;
height: 400px;
display: block;
...
}
#lb {
width: 71.5%;
display: inline; //not actually necessary
float: left;
...
}
#rb {
width: 28.5%;
display: inline; //again not necessary
float: right;
}
#rp{
border-left: 1px #6A6A6A solid;
border-right: 1px #6A6A6A solid;
padding: 30px 6px 7px 6px;
}
I have two divs placed inside a larger div. Each one of these two divs contains dynamically generated content and thus their heights vary, so I cannot know which one of the two will be taller. The parent div they are placed in has a 1px border and I would like to have 1px line between these divs as well, so that the line extends all the way down to the bottom of the parent div which adjusts itself based on the heights of the child divs. This is much easier to understand in the following picture:
I have tried setting the child divs to a height of 100%, but that does not seem to be working. How can I accomplish this effect? (This also needs to work in IE6)
Well, this is relatively easy, if all you want is a single border extending to the full height of the tallest element (in this case the tallest div), albeit my solution doesn't really address the potential equal heights issue (if you wanted the background-color of each div to extend to the full-height of the tallest element. It does, though, satisfy your request for the full-height single border:
#left,
#right {
width: 40%; /* adjust to taste */
float: left;
padding: 1em; /* adjust to taste */
}
#left {
border-right: 4px solid #000; /* adjust to taste */
}
#right {
border-left: 4px solid #000;
margin-left: -4px; /* the negative width of the border */
}
JS Bin Demo.
Edited to address my misunderstanding/mis-reading of the question.
This approach is kind of a hack, but is achievable using the same mark-up as in the previous demo, but more complex CSS:
#left,
#right {
width: 40%;
float: left;
padding: 1em;
}
#left {
border-right: 4px solid #000;
}
#right {
border-left: 4px solid #000;
margin-left: -4px; /* the negative width of the border */
}
#right p,
#left p {
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
margin: 0;
padding: 0 0.5em 1em 0.5em;
}
#right p:first-child,
#left p:first-child {
padding-top 1em;
border-top: 1px solid #ccc;
}
#right p:last-child,
#left p:last-child {
border-bottom: 1px solid #ccc;
}
Demo at JS Bin.
This won't be cross-browser friendly, though, IE (for certain) is likely to have problems with, at least, the :last-child pseudo-selector, so a JavaScript solution might be better for you in this instance. Although there is a more simple option to wrap the inner divs (in this case the #left and #right divs) in another div:
<div id="wrap">
<div id="left">
<div class="innerWrap">
<!-- content -->
</div>
</div>
<div id="right">
<div class="innerWrap">
<!-- content -->
</div>
</div>
</div>
Which can be used with the css:
#left,
#right {
width: 40%;
float: left;
padding: 1em;
}
#left {
border-right: 4px solid #000;
}
#right {
border-left: 4px solid #000;
margin-left: -4px; /* the negative width of the border */
}
div.innerWrap {
border: 1px solid #000;
}
Demo at JS Bin
But, while that's more cross-browser friendly, it does start a descent into the madness that is divitis.
try div {overflow:auto } where DIV is the container. or you can use the clearing DIV which you have to add after DIV 2 and before the main DIV .clear { clear:both }
EDIT: I overlooked - you wanted the DIVs to be set at equal height? That's not gonna happen due to the fact that it's a free flow document. You will need to use Javascript where it can look at the tallest DIV and set other DIV to match that height.
http://www.kensfi.com/set-a-div-height-equal-with-of-another-div/
considering you want this to degrade nicely all the way back to IE 6 have you considered a 3-column table with the center column with width of 1px band background-color of your divider color? outside olumns being the containers of your DIVs
I'm partial to JS in this case. If you assign an id to each div, then at the end of the loading of content call something like this (this is NOT REAL CODE):
if (get(div1).offsetHeight > get(div2).offsetHeight( {
div1.borderRight = 1px;
else
div2.borderLeft = 1px;
Oh...I may have misread that. If you want the divider to stretch the entire parent div, then set div1.style.height to divParent.clientHeight and add the border to it.