css horizontal scroll within a table - html

I want to construct a timeline that has horizontal scrolling.
I have a wrapper DIV, inside it has months. Each month is a DIV inline-block. This works:
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
This almost works, but because my clients site uses tables for layout the scroll bars don't work. This fails:
<table><tr><td>
<div class="wrap">
<div class="month">Jan 2013</div>
<div class="month">Feb 2013</div>
...
</div>
</td></tr></table>
Here is a jsfiddle to show what I mean: http://jsfiddle.net/fhL9u/2/
NOTE: The top timeline example works as you resize the browser. It is 100% width of the page (or containing element.)
How do i make the second timeline overflow correctly? It must take up the remaining width of the screen (no with: 100px hacks), and if possible only show scroll bars when the months overflow.
This is an internal application so I can tell people to use Firefox or Chrome if I need to. This means I can use advanced CSS3 stuff or browser specific ( -webkit or -moz ) stuff. I'd prefer that it was IE8 compatable (just for my own curiosity)

If you can fix the width of that text (in pixels or percents) use this solution:
table {
table-layout: fixed;
width: 100%;
}
td:first-child {
width: 100px; /* or width: 15%; */
}
Note that you can use a different selector for the text (like a class)

Possible solution....
The main issue may be that the "Site Navigation" cell is part of the scroll area.
table { display: block; }
Then assign the .wrap class to the table and remove the div encompassing the months.
Fiddle here
only tested in Chrome.

You could just put a width on the div.wrap, say 400px- that works and is just one line of code:-)

Related

Making HTML <div> tag not take the entire length of the page

I am in the process of making my own website, and I am making it out of pure HTML. I encountered in the making of the page, as I will describe below.
Here's my code for reference :-
<head>
<style>
img {
display: block;
margin-left: auto;
margin-right: auto;
}
</style>
<style>
.sideDiv {
border: 1px outset black;
background-color: white;
text-align: center;
width: 120;
height: 400;
}
</style>
<style>
.mainDiv {
border: 1px outset black;
background-color: white;
text-align: left;
width: 400;
height: 300;
}
</style>
<img src="AyushLogo.png" alt="logo" height="9.2%" width="9.2%" style="float:left">
<br>
<a><button>About Me</button></a>
<a><button>Games</button></a>
<a><button>My Blog</button></a> <br><br>
<hr>
</head>
<body>
<div class="sideDiv">
</div>
<div class="mainDiv">
<p>Hi,<br>My name is Ayush Bhatt.<br><br>I love to code and remake old games. You can view some of my games by clicking on the 'Games' button on the top bar.</p>
</div>
</body>
</html>
The output looks like this :-
I wanted the tag with the "mainDiv" properties to appear at the side of the one with the "sideDiv" properties, but it just doesn't want to.
PS : I want to use only HTML as long as possible
An important thing about <div> tags is that they are known as "block-level" elements, which in particular means that they always start on a new line and take up the full width available, regardless. With this in mind,
writing
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
should result in a div with class sideDiv and width as defined in the class, and then a new div with class mainDiv started on a new line, as block-level elements do by default, though note that this is simultaneously also because the div with class sideDiv takes up the remaining width on the page as a block-level element (though its content width is as described in the class, it being a block-level element is a bit like it "reserving" the rest of the width even though its content only uses the amount defined), so the next element (block level or inline) can only start on at least the next line.
If you want to circumvent this behavior, there are many ways to do it. One is by using an external tool like bootstrap, as pointed out by another answer, but my favorite is to simply use flex box. This can be done for your code in this way
<div style="display: flex; flex-direction: row;">
<div class="sideDiv"></div>
<div class="mainDiv">
...
</div>
</div>
A method that directly overwrites the block-level property would be to set the style display: inline-block; for both divs, to prevent either from starting on a new line or taking up the whole available width by default. (Just one isn't enough, if you only set it on the first one, the second still starts on a new line by default, and if you only set it for the second one, the first still takes up all available width by default). However, this causes the element to be treated completely as an inline element besides the fact that block-level height and width can be applied, and can be strange/difficult to maneuver as a result. It is often easier to just use a flex box. Code for this would be
<div class="sideDiv" style="display: inline-block;"></div>
<div class="mainDiv" style="display: inline-block;">
...
</div>
However, note that <p> is also a block-level element, so directly substituting in your original code in the mainDiv div would still cause it to skip a line before displaying. Again, it is usually easier, more modern, and better looking to just use a flex box.
Edit: Added the detail about block-level elements taking up all available width, and fixed the incorrect initial method that changed the display property to overwrite the block-level property by setting display: inline;. This can work, but it will ignore the heights and widths of the <div>s.
try using bootstrap , it deals with layout perfectly , here is an example :
<div class="container">
<div class="row">
<div class="col-md-6">
this is the left section
</div>
<div class="col-md-6">
this is the right section
</div>
</div>
</div>
for more details check :
https://getbootstrap.com/docs/5.0/layout/grid/
NOTE : you will need to include bootstrap and jQuery libs , check for online tutorial to start using bootstrap

How to center iframe horizontally when there's a vertical scroll bar?

I have a top navigator, and an iframe below the navigator which load the content.
The layout is kind of like
<body>
<div style="text-align:middle">
<div id="nav"></div>
<iframe></iframe>
</div>
</body>
The navigator is set to fixed width to match the width of iframe content which is not full screen width. So that the navigator and the iframe are aligned at both sides.
But when iframe's height grows beyond the screen, the vertical scroll bar for the iframe shows up and the the iframe becomes a little left(no longer in the absolute horizontal position) and not aligned with the top navigator.
How could I make the iframe always showing at the center even with a vertical bar?
I think this should be a common issue but haven't searched out a similar question here...
Edit 1:
Attach a full sample here to illustrate this question.Here index is the main page, iframe2.html is a frame without vertical bar and iframe.html is the one with a bar. The blue block(iframe) is not aligned with the other two:
index.html:
<html>
<head></head>
<style type="text/css">
iframe {
width : 100%;
padding : 0;
margin: 0 auto;
display : block;
}
</style>
<body>
<div style="text-align:center;margin:0 auto;overflow:hidden">
<div style="background-color:red;width:900px;margin:0 auto;padding:8px 0 8px 0">
<span>test</span>
</div>
<iframe frameborder="0" scrolling="auto" src="iframe2.html" style="height:200px;"></iframe>
<iframe frameborder="0" scrolling="auto" src="iframe.html" style="height:100%;"></iframe>
</div>
</body>
</html>
iframe2.html
<html>
<head></head>
<body style="padding:0px;margin:0px;">
<div style="width:900px;height:190px;background-color:green;margin:0 auto"></div>
</body>
</html>
iframe.html
<html>
<head></head>
<body style="padding:0px;margin:0px;overflow-y:scroll">
<div style="width:900px;height:2000px;background-color:blue;margin:0 auto"></div>
</body>
</html>
Result:
You can center the iframe using css,
iframe {
margin: 0 auto;
display: block;
}
See the example: https://jsfiddle.net/bnby6umd/
After my comment (as this seemed to help you with the edits you have made):
Perhaps always force scrollbar even when it is not needed, and then align the navbar to that? body { overflow-y: scroll; }
and further to your reply, I would suggest the simplest way to keep the elements aligned would be to ensure they are the same width. As you are now forcing the scrollbar permanently, perhaps the easiest way to do this would be to add to the width of the first element, or remove from the width of the second, to account for the width of the scrollbar.
Although this would be very browser dependant as each browser may use a slightly different width scrollbar, as per this article, I suggest altering whichever width by 17 pixels, and see if that achieves the effect you are after.
UPDATE
Apologies, I misunderstood what you were after. The reason you are experiencing this issue is because you are getting confused between styling the iframe element and the content within the document it is displaying.
By setting the <div> within the 'iframe.html' files to a width of 900px, you are only styling the content being displayed. The 'outer' iframe element is being styled to 100% width, and so will span the full width of the window. Because of this, the centered content will be offset by the horizontal scrollbar, giving the appearance of not being aligned - however the actual iframe is not moving at all.
It is only possible to align the edges of two elements, regardless of their position, is for them to have the same width (obviously, as otherwise the edges could never line up). To do this, style the <iframe> to be of the correct width - what you do with the content behind that is then unimportant. This way, the width of the scrollbar will then be taken into account automatically, and the total width adjusted accordingly.
Basically, in the styling for the iframe, change width: 100%; to width: 900px;.
Here's a Fiddle.
I've tried to create a diagram to help explain:
On the left the content is offset by the scrollbar, whereas on the right, the element is styled and centered, not the content, and so the scrollbar just overlaps the content.
You may also like to take a look at some documentation and tutorials for iframes.

Image overflowing parent container in Firefox after jQuery scrollbar added

I'll try to keep this as succinct as possible...
I have a image that I had setup to fill it's parent div horizontally and scroll vertically.
I've since added a jQuery based scrollbar to replace the native scrollbar for non webkit browsers. Since doing so, my image is overflowing it's parent horizontally in Firefox. Chrome and IE are not having the issue.
It's a little convoluted because I'm using skelJS to set container sizes based on breakpoints, but I don't think that should make a difference. The parent and child containers along with the image have width's set.
I'm going to post the HTML and CSS first and see if there's something obvious I'm overlooking. The jQuery targets the .scroll-pane2 class and is working fine beyond my overflow problem. I'm happy to post that code if there isn't something obvious that I'm missing.
Thanks in advance for the help!
A summary of the code:
HTML:
<div class="8u tasting-menu">
<header>
<div class="scroll-pane2">
<p>Scroll or click for full-size menu</p>
<img src="images/bwh-tasting-list-png.png" class=""/>
</div>
</header>
</div>
CSS:
body {
width:100%;
}
img {
width:100%;
height:auto;
}
.8u {
width:66.6%;
height:auto;}
.scroll-pane2 {
height:27em;
width:100%;
overflow:hidden;
}
.tasting-menu img {
width:98%;
height:auto;
}
The jQuery based skelton I'm using accounts for the .8u. I've used it quite regularly and never had the issue, but I'll definitely take another look at it.
I tried the overflow-x:hidden to no avail. The jQuery scrollbar I'm using overrides the overflow in the scroll-pane2 class.
I need to relook at the scroll bar script I'm using... because before installation, it worked fine, albeit with the Firefox native scrollbars.
I'll try to put a jsfiddle together.

make even / odd(nth-child) divs in listview, with different sizes connect with eachother with CSS

I am currently working on a responsive framework which contains a section that has max. 3 columns when the browser is not scaled. I use Pseudo selectors (nth) with these column to change the height of the odd divs. The responsiveness works like a charm, no problem there. The odd/even divs work fine, it behaves perfectly even when scaled down.
My problem is this:
I made a listview with divs because the intention was to make the even and the odd divs fit one below the other and next to each other seamlessly with negative top margins. That does not seem to work unfortunately. there are gaps that I can't seem to get rid of.
A mockup to clarify my intentions:
Example
I would like to have a full css solution for getting rid of the gaps but i'm afraid that's not possible unless there's something i'm totally missing.
Html:
<section class="home">
<p>It's <span id="demo"></span> today</p>
<div class="work">
<div class="work_col-1-3">test1</div>
<div class="work_col-1-3">test2</div>
<div class="work_col-1-3">test3</div>
<div class="work_col-1-3">test4</div>
<div class="work_col-1-3">test5</div>
<div class="work_col-1-3">test6</div>
<div class="work_col-1-3">test7</div>
<div class="work_col-1-3">test8</div>
<div class="work_col-1-3">test9</div>
<div class="work_col-1-3">test10</div>
<div class="work_col-1-3">test11</div>
<div class="work_col-1-3">test12</div>
</div>
</section>
CSS
#media only screen and (min-width: 35em) {
.work_col-1-3 {
position:relative;
width: 33%;
height: 200px;
background-color:purple;
display:inline-block;
margin:-2px;
}
.work_col-1-3:nth-child(odd) {
position:relative;
background-color:orange;
margin:-2px;
height:300px;
}
Also here's a fiddle. The fiddle contains just the 3 column part of the css but it should fit in every state. ( 3-column, 2-column & 1-column but the 1 column is working already)
http://jsfiddle.net/Vishumahabir/tB7Aw/
The "section" element is a child object in an "article" element.
Any thoughts? Thank you!
If the heights are set then you can use the following to do it, though it's very ugly especially if you add more elements
.tmcwork_col-1-3:nth-child(2n + 5), /* Select oranges after first line */
.tmcwork_col-1-3:nth-child(2n + 8) { /* Select purples after second line */
top:-100px;
}
.tmcwork_col-1-3:nth-child(2n + 11) { /* Select oranges after third line */
top:-200px;
}
Demo
If the heights vary or you have a lot more elements it'd be easier to look at an existing one and use a similar technique as them

How can I make a table with a fixed width, but not a fixed height?

I am having trouble make a jsfiddle that reproduces my problem, but I have one that demonstrates the basic layout I am dealing with.
http://jsfiddle.net/LurUM/4/
<div style="width: 73%; float: left;">
<!-- table here -->
</div>
<div style="width: 23%; float: right;">
<!-- sidebar here -->
</div>
I have a table on a page like this one, but it is not the correct width, it is much wider, colliding with the right side bar and going past it. I tried setting the table's width to 100% and going to a fixed table-layout. The width behaved exactly as I wanted it to, but then some of the texts in the cells of the table were spilling out and colliding with text in other columns. What I want is for the cells to become taller and the text to go onto a new line instead of spilling over, but if I understand correctly the fixed layout is preventing this.
Am I understanding the situation correctly? What's the solution? And why did the table have so much extra width to begin with?
Try this code:
<table style="table-layout: fixed; width: 100%">
<tr>
<td style="word-wrap: break-word">
LongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongLongWord
</td>
</tr>
</table>
The word-wrap: break-word property will wrap long words onto the next line and adjust words so that they don't break mid-word. When used in conjunction with table-layout: fixed; it will prevent the table bounds from overflowing.
If there is other content that must remain aligned with your table then keep the divs, otherwise I would suggest using id names for the tables, and moving all styles to the applicable style sheet. Your tables will then be getting their width setting directly from css instead of overflowing a parent container. I would also suggest that you use only one float, which ever is topmost on your page. This will keep the html cleaner i.e. easier to read and debug.
<div class="leftSide">
<table>html</table>
<p>other stuff that must be aligned with table</p>
</div>
<table id="rightTable">table that will float around other content</table>
<div>other content will continue to float until space is used up</div>
CSS
.leftSide {float: left; width: 40%; margin-right 20px; }
.leftSide table {width: 90%; }
.leftSide p {other css}
The html is easier to read this way, and specificity is used to drill down to the elements within the div, the table will be 90 percent of the width of its parent div and will no longer overflow the container (unless you put some giant image in there). Other CSS can be added including the word-wrap and break-word mentioned in other answers.
w3 has the definitive answers for CSS specificity and other inheritance issues like the one your facing http://www.w3.org/TR/selectors/