I would like to have two columns with separator border.
The task is quite simple when the columns have the same height.
But, if the heights of columns are different, and you don't know a priori which is the higher column, (and I don't want to use fixed value) how can I solve the problem?
The background color is the same.
A pure css solution is the best. If not possible, also a JavaScript code is acceptable.
Click here for the current example.
You can set the display of the container to table and the left and right columns to table-cell
#container {
display: table;
width: 100%;
}
#content-left {
border-right: 4px dotted #000;
width: 50%;
display: table-cell;
margin-right: -4px;
}
#content-right {
width: 50%;
display: table-cell;
}
Then you just need to wrap the left and right columns in the container and you have it.
<div id="wrapper">
<div id="container">
<div id="content-left">left</div>
<div id="content-right">right<br />right<br />right</div>
</div>
<div id="footer">
footer content
</div>
</div>
Look Here
One css method is to use a repeating background image for the dotted line - this repeat goes on a div surrounding the 2 columns, like so:
http://jsfiddle.net/P5Z9s/ (obviously you'd get a better image, I just pulled this from google)
Or using jQuery, you can do something like:
http://jsfiddle.net/ntWRY/ (you basically add the same class to the columns you want to equalize, and then call the function on that class)
I suggest you read about faux columns.
If you can't afford the time (not that much, but...), then using JS you could simply check which is higher and set the other's min-height to that.
I think this would work as you want it. But I suggest you learn about the faux columns instead.
Perhaps something like this is what you are looking for:
http://jsfiddle.net/euYTQ/40/
HTML:
<div class="container">
<div class="left">section left</div>
<div class="right">section right<br>other row</div>
<div class="footer">section footer</div>
</div>
CSS:
div.container {
position:absolute;
background:#eee;
margin: 0 auto;
width: 750px;
height:100%;
}
.left{
position:absolute;
left:0px;
top:0px;
bottom:50px;
width:48%;
border-right-style:dotted;
}
.right {
position:absolute;
right:0px;
top:0px;
bottom:50px;
width:48%;
border-right-style:dotted;
}
.footer {
position:absolute;
background: none repeat scroll 0 0;
bottom: 0px;
height:50px;
left:0px;
right:0px;
border-top-style:dotted;
}
Related
my question is rather complicated.
In my layout i have a left column and a right column. For example 30% and 70% width. below them there is another item, now theres the challenge:
if my 30% column is higher than the 70% column the "challengeblock" should fill on the right side.
if the right side is the higher one the "challengeblock" should be on the bottom with 100% width.
Here I made an example:
https://jsfiddle.net/by6tkg7L/
The green one should fit on the right in this code.
I tried it with
flex-grow
in this case, but also had a try with grid (not to experienced there so seems like I need to read some more first)
I´m also open for masonary layouts like with isotope, but found no way so far to make it fill OR make it grow depending on the rest.
I would ofcourse prefer a CSS-only way and would like to avoid calculating with JS.
Tahnks in advance
Css only solution. Working fiddle: https://jsfiddle.net/by6tkg7L/1/
To be able to see it working you have to change height of the blue block (class .right_top).
I only modified the css, i used block and inline-block on the child elements (with float: left) and i've set flex only on the question element setting a min-width and a max-width instead of a static width.
CSS:
.wrapper{
display: block;
width: 100%;
flex-wrap: wrap;
flex-direction: row;
}
.left{
background-color: red;
height: 500px;
width: 30%;
display:inline-block;
float:left;
}
.right_top{
background-color: blue;
height: 500px;
width: 70%;
display:inline-block;
float:left;
}
.question{
min-width: 70%;
width: auto;
max-width: 100%;
background-color: green;
height: 300px;
display:flex;
}
HTML:
<div class="wrapper">
<div class="left">
</div>
<div class="right_top">
</div>
<div class="question">
</div>
</div>
I currently have a grid set up that looks something like this:
<div class="grid-container">
<div class="headers"> <!-- ... --></div>
<div class="row-container">
<div class="row"> <!-- ... --></div>
<!-- ... -->
</div>
</div>
Essentially what I'd like to do is place an overflow-x on the entire grid-container (so that scrolling horizontally will scroll both the headers and the rows together), but just place an overflow-y: overlay on the row-container (so that scrolling down will only scroll through the rows and keep the grid headers in a fixed position.
I was able to do that and it looks okay, however, the vertical scrollbar on the row-container is at the far right of the row-container. I'd like it to be visible and in a fixed position (similar to how it would look if you were to place an overflow-y on the entire grid-container except without affecting the headers).
Sorry I know I probably explained this poorly, but here's a JSFiddle that should hopefully illustrate the problem I'm having: https://jsfiddle.net/4xwd5yzp/
Notice in that fiddle, you can only see the vertical scrollbar when you scroll to the end of the row-container.
Thank you in advance for any help. Ideally, I'd prefer a solution using just HTML + CSS, but I'm also open to use vanilla JS + jQuery if absolutely necessary.
EDIT: Here is an example of how it currently works (not ideal):
And here is a photo of how I want it to look:
You were very close, if you take the overflow-y style off of .row-container and add it to .grid-container and also add position: sticky; and background: white; to .headers then I believe it'll work how you want it to.
Update the width in % rather than px.
`
.grid-container {
border: 1px solid black;
height: 200px;
width: 99%x;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
}
.row-container {
height: 150px;
width: 99%x;
overflow-y: overlay;
}
.grid-cell {
display: inline-block;
width: 250px;
}
.headers {
border-bottom: 1px solid black;
height: 50px;
width: 99%;
}
.row {
border-bottom: 1px solid lightgray;
height: 30px;
width: 99%;
}
`
I'm working on the display portion of a calculator. I have a div, with two divs, each with text, inside it.
<div>
<div>I'm text</div>
<div>I'm text</div>
</div>
The user can use buttons to add text to the divs. I want the top div to be a maximum of two lines and vertically-aligned to the bottom. When it exceeds this length, the overflow should be out of the top and hidden. I.e. the overflow should show the bottom part of the excessive text, and hide the top part.
I have searched similar questions relating to hiding images or links and tried their solutions. These generally revolve around using the following properties: position, width, height, bottom, overflow, vertical-align, word-wrap. I've understood most of these, but haven't been able to get them to work. One solution I haven't been able to successfully attempt appears to try and use some combination of the above with an additional nested div.
At this point, I've got the height & width controlled. The top div will only display two lines of text. I also have the overflow working. When it's too long, it is hidden.
The problem is that the bottom is hidden, instead of the top.
This is what it looks like. Notice the twos aren't visible, they're hidden:
This is what I want. Notice the twos are visible:
Here's relevant HTML & CSS, and below that is the link to a codepen if you need more information:
HTML (trouble div is #memory):
<div id=calculator>
<div id=displaybox>
<div id=memory>
0
</div>
<div id=display>0</div>
</div>
</div>
CSS:
#calculator {
border-style: solid;
height: 325px;
width: 260px;
margin:auto;
margin-top:10px;
border-radius:8px;
background-color: #494949;
font-family: 'Audiowide';
}
#displaybox {
border-style:solid;
border-width:3px;
width:227.5px;
margin-left:12px;
margin-right:auto;
border-radius: 8px;
text-align:right;
margin-top:20px;
padding-right:12px;
padding-left:3px;
font-size:30px;
background-color:#D4D7A1;
height: 75px;
}
#memory {
font-size:15px;
padding-right:3px;
line-height: 15px;
margin-top:5px;
padding-left:12px;
color:#767676;
margin-bottom:-7px;
word-wrap: break-word;
height:30px;
width:207px;
overflow:hidden;
vertical-align: top !important;
}
Codepen: https://codepen.io/ethan-vernon/pen/WyQqzM"https://codepen.io/ethan-vernon/pen/WyQqzM
This change to the #memory block did it:
Added display: flex and flex-flow: column-reverse
#memory{
font-size: 15px;
padding-right: 3px;
line-height: 15px;
margin-top: 5px;
padding-left: 12px;
color: #767676;
margin-bottom: -7px;
word-wrap: break-word;
height: 30px;
width: 207px;
overflow: hidden;
display: flex;
flex-flow: column-reverse;
}
I have not found an answer yet still for CSS/HTML solution. However, I turned to jQuery/JavaScript and have solved my problem by calling the below function after each update to the #memory div.
function heightCheck(str) {
console.log(str.substr(1));
console.log('memory: ' + $("#memory").height());
while ($("#memory").height()>30) {
str=str.substr(1);
$("#memory").text(str);
console.log(str);
console.log($("#memory").height());
}
}
The page I have got is like this: .
I wanted to make it centralized but I couldnot do that.
The problems are:
I want to give black div full page.
I want to centralize other two divs without using left property in css.
While hovering the value of z should increase by any value so that the whole div can come up.
I learned about margin: 0 auto o auto; property that it centralizes the element with respect to page.
I want to get the same for yellow and green divs using margin property w.r.t. black divs.
Can I get these results using CSS or i will have to use Javascript etc?
My html code is here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styling.css"/>
</head>
<body>
<div class="first">
<center> The first link </center>
</div>
<div class="second">
<center> The second link </center>
</div>
<div class="third">
<center> The third link </center>
</div>
</body>
<html>
My css document is:-
.first
{
position: absolute;
width:500px;
color:#fff;
height:200px;
background-color:#000;
z-index: 0;
margin:0 auto 0 auto;
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
left:60px;
z-index: 1;
margin:50px auto 0 auto;
}
.third
{
position: absolute;
width:300px;
height: 200px;
left:100px;
background-color:yellow;
z-index: 2;
margin:100px auto 0 auto;
}
body div:first-child a:hover
{
font-size:30px;
color:yellow;
z-index:5;
}
body div +div a:hover
{
font-size:40px;
color:red;
z-index: 5;
}
body div+div+div a:hover
{
font-size:50px;
color:#fff;
z-index:5;
}
I apologize for my English.And hope you will get my problems.
I still believe that using left is the best way to solve your problem — not sure why OP wants to avoid it.
Here is the proof-of-concept fiddle: http://jsfiddle.net/teddyrised/YqDL5/
Instead, use the following trick: set their position from the left by 50% of the container's/parent's width. That's half correct. However, we also need to take into account the width of the element itself, which means we have to offset it backwards by half of its own width.
Use this:
.second, .third {
left: 50%;
transform: translateX(-50%);
}
There are also some changes you have to make to your HTML code:
I would suggest wrapping everything around a parent container that is relatively positioned, and instead of using margins to offset the second and third div from the top, use top instead.
Remove <center>. Delegate layout to CSS, and this HTML tag has been deprecated long time ago.
Here is the revised HTML:
<section>
<div class="first">The first link </div>
<div class="second"> The second link </div>
<div class="third"> The third link </div>
</section>
Also, I suggest setting the first div to relative positioning, so it will not cause the parent element's height to collapse. Otherwise, you will have to set an explicit height since absolute positioning takes elements out of the flow, and the parent will not take it into account when calculating its own dimensions.
section {
position: relative;
}
.first {
width:100%;
color:#fff;
height:200px;
background-color:#000;
}
.second, .third {
left: 50%;
transform: translateX(-50%);
}
.second
{
width:400px;
position: absolute;
height:200px;
background-color: green;
top: 50px;
z-index: 1;
}
.third {
position: absolute;
width:300px;
height: 200px;
top: 100px;
background-color:yellow;
z-index: 2;
}
See fiddle at: http://jsfiddle.net/teddyrised/YqDL5/
I have this html structure.
<div id="parent">
<div class="child">
<h1>title</h1>
<p>content</p>
</div>
<div class="child">
<h1>title</h1>
<p>content</p>
</div>
<div class="child">
<h1>title</h1>
<p>content</p>
</div>
</div>
and a css for those elements.
#parent{
padding: 0px 8px;
overflow: auto;
max-width: 100%;
max-height: 100%;
}
.child{
width: 300px;
display: block;
}
.child:first-child{
float: left;
}
.child:last-child{
float: right;
}
.child:nth-child(2){
/* what is the style here to make it center? */
}
as you can see from above codes, the objective is to make those child elements align correctly in a neat and clean way so the first child element is floated left, the last child element is floated right and the second child element should be exactly on between those left and right child elements so what im trying to achieve is a three box that align on a equal patern inside a parent div. So far I tried margin: 0 auto; on the middle child element but unfortunately does not work so currently Im looking for a precise solution to achieve my desired output.
Just float it:
#parent{
padding: 0px 8px;
overflow: auto;
max-height: 100%;
float:left;
width:900px;
}
.child{
width: 300px;
display: block;
float:right;
}
here's a fiddle
Float your second div to the left and apply a margin left if needed. If you are trying to create a responsive template, simply use % instead of pixels. I hope that makes sense.
.child:first-child, .child:nth-child(2) {
float:left;
}
.child:nth-child(2) {
/* what is the style here to make it center? */
margin-left: what ever pixels or %;
}
.child:last-child {
float:right;
}
JSFIDDLE (Responsive):
http://jsfiddle.net/83Gg2/
You don't need to float the elements one to other, what you need, is to use display: inline-block property on them, is an hacky but an cleaner approach:
#parent{
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
overflow: hidden;
}
.child{
width: 33%; // Since there are 3 childs.
display: inline-block;
}
The trick and hack here is that you need to comment the space between the child elements in your HTML code, since the property display:inline-block only align elements that have not space between them, so your html code should look like this:
<div id="parent">
<div class="child">
<h1>title</h1>
<p>content</p>
</div><!--
--><div class="child">
<h1>title</h1>
<p>content</p>
</div><!--
--><div class="child">
<h1>title</h1>
<p>content</p>
</div>
</div>
~
This is the link to the JsFiddle Check it out
~
~
Flexbox makes this trivial:
#parent {
display: flex;
}
.child {
flex: 1;
}
Add prefixes and older syntax as necessary, conforming to http://caniuse.com/#search=flexbox
I whipped up an example for you: http://codepen.io/anon/pen/tribL
Ok, since you tag jquery also, here is the JQ way.
If you dont want to set fix width to #parent and you want a fix width to .child, use this. Also works in cross browsers and old browsers.
DEMO http://jsfiddle.net/yeyene/VW9mw/
$(document).ready(function(){
moveCenter();
$(window).resize(function() {
moveCenter();
});
});
function moveCenter(){
var mar = ($('#parent').width()-$('.child').width()*3)/2;
$('.child').eq(1).css({
'margin-left': mar+'px',
'margin-right':mar+'px'
});
}