I have 3 divs and I cannot change the html dom:
<div id="a"/>
<div id="b"/>
<div id="c"/>
I need to create css file that displays those divs like the following table:
<table>
<tr>
<td id="a"></td>
<td rowspan="2" id="c"></td>
</tr>
<tr>
<td id="b"></td>
</tr>
</table>
Is there any way to do it?
Have the first two divs display:inline-block to keep them on the same line. Make the bottom div the width of the top two plus padding.
Sorry for a bit vague.
Example here:
http://jsfiddle.net/3ZWGx/4/
--Fixed--
Use the css display:
http://www.quirksmode.org/css/display.html#table
http://www.w3schools.com/cssref/pr_class_display.asp
It works in IE8+.
You have e.g. display:table, table-cell or table-column.
Unfortunatelly, the rowspan is not supported, but you can embed another div in it and emulate it.
Assuming that all three divs are surrounded by a container and that these can be rendered at a fixed width, this jsFiddle shows an approach using absolute positioning. Here's the code inline:
Markup (note, that some browsers don't render shortcut divs correctly):
<div id="container">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
CSS:
#container
{
width: 400px;
height: 200px;
position: relative;
}
#a
{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100px;
background-color: red;
}
#b
{
position: absolute;
top: 100px;
left: 0;
width: 200px;
height: 100px;
background-color: green;
}
#c
{
position: absolute;
top: 0;
left: 200px;
width: 200px;
height: 200px;
background-color: blue;
}
Although there's a little extra spacing around the cells on the left, this gives similar presentation to what you're looking for:
demo at jsfiddle
<head>
<style type="text/css">
#divtable {
display: table;
border-collapse: separate;
border: 1px outset black;
border-spacing: 2px;
}
#d, #e, #f {
display: table-cell;
border: 1px inset black;
padding: 2px;
vertical-align: middle;
}
.row1, .row2 {
display: table-row;
}
.cell_f {
display: table-cell;
height: 100%;
}
</style>
</head>
<body>
<div id="divtable">
<div class="cell_de">
<div class="row1">
<div id="d">D</div>
</div>
<div class="row2">
<div id="e">E</div>
</div>
</div>
<div id="f">F</div>
</div>
What is required in addition to the code above to run these? I copied this into an html document and all I got was 3 rows.
Related
I have a vertical line running down the middle of my page, but it only goes as far as the first section. What I want it to do is run all the way down to the very end of the page when you scroll all the way down. I'm not sure how to achieve this.
Right now my CSS for my line is this:
.line{
position: absolute;
top: 100px;
margin: auto;
width: 50%;
height: 100%;
border-right: 1px dotted black;
}
I don't want to have a set height, because as I start adding more projects to the site, I would like the line to grow with the page without having to change the height every time.
Here's a codepen: https://codepen.io/Furr/pen/gJLapb
This website is my inspiration, I would like it to be something like this: https://www.rezo-zero.com/projects/
Thanks in advance.
I think you may actually want 3 divs like this. ( the line is a div)
.vl {
border-left: 1px dotted black;
height: 500px;
}
#parent {
display: flex;
}
#right {
width: 300px;
margin-left: 5px;
}
#left {
flex: 1;
}
<div id="parent">
<div id="left">Left Side</div>
<div class="vl"></div>
<div id="right">Right Side</div>
</div>
another reason to have 3 divs is that you can "break up" the line with clickable content just like in your example
One of feasible way is to use pseudo element to make the vertical line so that it will expand according to the container. Here is an simple example.
.timeline-container {
position: relative;
width: 500px;
margin: 0 auto;
}
.timeline-container:after {
content: " ";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background-color: #000;
}
.timeline-container .event {
width: 50%;
}
.timeline-container .event.left {
text-align: right;
}
.timeline-container .event.right {
margin-left: 50%;
}
.timeline-container .event-content {
margin: 10px;
}
<div class="timeline-container">
<div class="event left">
<div class="event-content">2019-05-14<br>Testing Events</div>
</div>
<div class="event right">
<div class="event-content">2019-05-10<br>Another Events</div>
</div>
<div class="event left">
<div class="event-content">2019-04-25<br>Great Exhibition</div>
</div>
<div class="event right">
<div class="event-content">2019-03-27<br>School Festival</div>
</div>
</div>
You can look at the source code for the website you wanted to emulate by typing CTRL + SHIFT + I in Chrome after opening it.
I'd be really grateful if anyone could help me to solve the following "trouble".
I have a list of textual items ("text" < div >); every text refers to an image
The aim is to let the image appear in the "image" < div >, when the mouse is over the related-text
This is the best I could do ...
<html>
<head><style>
div { border: solid 1px #000; margin: 0 auto;}
#image { width: 250px;
float: right;
margin-top: 0px;
display: none; }
#text { width: 750px;
float: left; }
#text:hover + #image { display: block; }
</style></head>
<body>
<div style="width: 1004px; height: 500px; background-color:#dedede;">
<div id="text">Text-1 </div>
<div id="image"><img src="image-1.jpg" width=250px/></div>
<div id="text">Text-2</div>
<div id="image"><img src="image-2.jpg" width=250px/></div>
</div>
</body></html>
... the problem is: how con I allow the image to appear always at the top of its < div >, without following the text ?
Many thanks in advance !
Depends on your situation but I'd replace
#text:hover + #image { display: block; }
with
#text:hover + #image { display: block; position:absolute; margin-left:750px;}
That way the div will be always in the top right corner.
You can't use the same ID more than once in your HTML, so for this to work you would have to replace #text and #image with something like .text and .image using classes.
<div class="text">Text-1 </div>
<div class="image"><img src="image-1.jpg" width=250px/></div>
<div class="text">Text-2</div>
<div class="image"><img src="image-2.jpg" width=250px/></div>
Here's a demo of a working version: http://jsfiddle.net/cer95pqx/5/
Just change Your CSS code for #image to:
#image {
width: 250px;
position: absolute;
top: 0px;
right: 0px;
display: none;
}
And set position to relative, for parent div container.
<div style="width: 1004px; height: 500px; background-color:#dedede; position: relative;">
JSFiddle
I have three divs that I am trying to put on a single line. I want one to always snap left, and I want one to always snap right. The third one, which the display will be toggled using javascript, has to always be center. I've tried float. I've tried display:inline-block. Nothing works. Below is my code, any help would be greatly appreciated.
<div id="header" class="AppBackColor" style="color:#FFFFFF; padding:2px; width:100%; height:34px;">
<div style="height:100%;display:inline-block;float:left;">
<img src="Images/Logo/uss_logo_white.gif" height="30px" width="31px" alt="USS" />
<label>Change Control</label>
</div>
<div id="TimeoutWarning" style="height:100%; width:450px;display:inline-block;margin:0 auto;">Your session will expire in <label id="lblSessionCountDown">5:00</label>. Click <a style="color: Red;" href="#" onclick="ResetSession();void(0);">OK</a> to continue your session.</div>
<div style="height:100%;display:inline-block;float:right;">
<label>User:</label>
<asp:Label ID="lblUser" runat="server"></asp:Label>
<asp:ImageButton ID="btnLogout" runat="server" BorderStyle="None" ImageUrl="~/Images/Logout-icon.png" onclick="btnLogout_Click" Height="30px" Width="30px"/>
</div>
You can use absolute positioning like this:
.container {
position: relative;
width: 100%;
height: 50px;
}
.first {
width: 100px;
height: inherit;
position: absolute;
left: 0;
background-color: #FAA;
}
.second {
width: auto;
height: inherit;
position: absolute;
top: 0;
margin-left: 100px; // 1st div width
margin-right: 200px; // 3rd div width
background-color: #AFA;
}
.third {
width: 200px;
height: inherit;
position: absolute;
right: 0;
top: 0;
background-color: #AAF;
}
And then use a <div class="container"> which has inside the 3 divs with classes first, second and third.
If you set the margins of the second equals to the with of the first and third, like in the sample, it will fill up all the space.
You can look at it working in this fiddle: http://jsfiddle.net/jbustos/Bq2rw/
Here's an example of one way to do it. The order of the divs in the HTML being left, right, center is important, since otherwise the right will place itself below the left and center elements. See it live at jsfiddle (with JS to hide/show the center). Here's the HTML:
<div class="left">left text</div>
<div class="right">right</div>
<div class="center">center</div>
And CSS:
.left, .center, .right {
background-color: red;
width: 100px;
}
.left {
float: left;
}
.center {
margin: auto;
}
.right {
float: right;
}
I have trouble with textarea inside a div whose display style is table-cell. You can see the problem here. The last div has a textarea and somehow it causes an empty area below itself and above other divs.
BTW I am trying to have a structure like this. According to selection, cells will be displayed in a fixed height area with equal widths having a total 100%. Problem occurs when there is a textarea inside any div. If there is an existing component that behaves like this any recommendation will be appreciated.
HTML
<div class="panes">
<div id="pane1" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane2" class="pane">
<div class="pane-content"></div>
</div>
<div id="pane3" class="pane">
<div class="pane-content">
<textarea></textarea>
</div>
</div>
</div>
CSS
.panes {
display: table;
table-layout: fixed;
width:100%;
height:100px;
}
.pane {
display: table-cell;
border: solid 1px;
}
.pane-content {
display: block;
overflow: auto;
height: 100px;
border: solid 1px red;
}
.pane-content textarea {
display: block; /*This fix the issue in IE but other browsers still broken*/
width: 100%;
height: 100px;
}
make it like this:
.pane {
display: table-cell;
border: solid 1px;
vertical-align: top;
}
I'd like to put two columns on the side of the content div. The part I have problems with is that I want the columns being built from 3 parts. The top and bottom should have fixed heights, but the middle one would adjust depending on the content height. Look at the sample with one column:
<html>
<head>
<style>
* { border: 1px solid black;}
#contentWrapper { width:450px; }
#leftColumn { width:100px; float: left; }
#leftColumnTop { width:100px; height:50px;
background-color: gray; }
#leftColumnMiddle { background-color: red; }
#leftColumnBottom { width: 100px; height:50px;
background-color: gray; }
#content { width: 300px; float: left; }
#footer { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
<div id="leftColumn">
<div id="leftColumnTop"> </div>
<div id="leftColumnMiddle"> </div>
<div id="leftColumnBottom"> </div>
</div>
<div id="content">content<br> here <br>more
<br>more <br>more <br>more <br>more
<br>more <br>
</div>
<div id="footer">footer text</div>
</div>
</body>
</html>
What I want is the #leftColumnBottom stick at the top of the footer and red #leftColumnMiddle to fill the space between top and bottom part.
This works in everything except IE6; for that you'll need a conditional comment and css expression to set a height instead of bottom on #leftColumnMiddle
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<style>* { border: 1px solid black;}
#contentWrapper { position: relative; float:left; width: 450px; }
#leftColumnTop { position: absolute; width: 100px; height: 50px; left: 0; background-color: gray; }
#leftColumnMiddle { position: absolute; width: 100px; top: 50px; bottom: 50px; left: 0; background-color: red; }
#leftColumnBottom { position: absolute; width: 100px; height: 50px; left: 0; bottom: 0; background-color: gray; }
#content { width: 300px; float: left; margin-left: 100px;}
#footer { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
<div id="leftColumnTop"> </div>
<div id="leftColumnMiddle"> </div>
<div id="leftColumnBottom"> </div>
<div id="content">content<br>
here<br>more<br>more<br>more<br>more<br>more<br>more<br>
</div>
</div>
<div id="footer">footer text</div>
</body>
</html>
And to the commenter - it nearly worked, so that's why. ;)
try min-height for the one that needs to grow
If you need both columns to be of equal height, and work in IE6, you basically have to hack.
A solution I've used in the past involves setting up a fake margin/padding for one of the columns. This assumes that you know a upper limit of how large the columns can grow (could be in the magnitude of several thousand px's).
This solution is outlined here.
Quoting from the page I linked:
The basic method works like this:
Blocks which will act as columns must be wrapped in a container element
Apply overflow: hidden to the container element
Apply padding-bottom: $big_value [2] to the column blocks, where $big_value is a large enough value to guarantee that it's equal to or larger than the tallest column
Apply margin-bottom: -$big_value to the column blocks