This works fine in chrome but IE doesn't like it and breaks the content-main div's.
Checked for word-wrap: break-word as noted here white-space: nowrap is not working in IE in a horizontally scrolling box but I don't have that anywhere.
Here's a fiddle http://jsfiddle.net/02hgaahe/ although the fiddle in IE displays correctly.... odd.
Here's my code.
HTML-
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : Jan 7, 2015, 2:31:39 PM
*/
body {
font-family:arial,helvetica,sans-serif;
font-size:12px;
}
#wrapper {
margin:0px auto;
border:1px solid #bbb;
padding:10px;
height: 90%;
}
#header {
border:1px solid #bbb;
height:80px;
padding:10px;
}
#header > #content-main{
width:200px;
height:80px;
border: 1px solid #bbb;
}
.content {
margin-top:10px;
padding-bottom:10px;
white-space: nowrap;
overflow-x: visible;
overflow-y: hidden;
height:320px;
}
.content div {
border:1px solid #bbb;
}
.content-main {
display: inline-block;
width:500px;
height:300px;
}
#footer {
margin-top:10px;
padding:10px;
border:1px solid #bbb;
}
#bottom {
clear:both;
text-align:right;
}
<div id="wrapper">
<div id="header">Header</div>
<div class="content">
<div class="content-main">Left</div>
<div class="content-main">main</div>
<div class="content-main">right</div>
<div class="content-main">right</div>
<div class="content-main">right</div>
<div class="content-main">right</div>
<div class="content-main">right</div>
<div class="content-main">right</div>
<div class="content-main">right</div>
</div>
<div id="footer"></div>
<div id="bottom"></div>
</div>
Edit: Removed duplicate ID's and incorrect comment.
It is still displaying incorrectly though.
Edit: I think the issue was with Internet Explorer's compatibility settings for intranet sites, I didn't know that IE defaulted all intranet sites to compatibility mode (basically IE7).
Time for a shot in the dark!
Did you remember <!DOCTYPE html> at the start of your HTML file? Without it, older IE versions will default to Quirks Mode, which may not behave properly when it comes to CSS.
I believe the issue here is that you're using repeating id's.
If you want to 'duplicate' the effects of one div onto another, try using a class instead.
Using classes makes the 'class' reusable, unlike using 'id's, which should be unique and not repeated. Duplicating ID's cause all sorts of funny bugs/glitches.
Something like:
body {
font-family: arial, helvetica, sans-serif;
font-size: 12px;
}
#wrapper {
margin: 0px auto;
border: 1px solid #bbb;
padding: 10px;
height: 90%;
}
#header {
border: 1px solid #bbb;
height: 80px;
padding: 10px;
}
#header > #content-main {
width: 200px;
height: 80px;
border: 1px solid #bbb;
}
#content {
margin-top: 10px;
padding-bottom: 10px;
white-space: nowrap;
overflow-x: visible;
overflow-y: hidden;
height: 320px;
}
#content div {
/*padding:10px;*/
border: 1px solid #bbb;
}
.content-main {
display: inline-block;
width: 500px;
height: 300px;
}
#footer {
margin-top: 10px;
padding: 10px;
border: 1px solid #bbb;
}
#bottom {
clear: both;
text-align: right;
}
<div id="wrapper">
<div id="header">Header</div>
<div id="content">
<div class="content-main">Left</div>
<div class="content-main">main</div>
<div class="content-main">right</div>
<div class="content-main">right</div>
<div class="content-main">right</div>
<div class="content-main">right</div>
<div class="content-main">right</div>
<div class="content-main">right</div>
<div class="content-main">right</div>
</div>
<div id="footer"></div>
<div id="bottom"></div>
</div>
As a side note, as #James said, comments in css look like /*comment*/ and not //comment
Related
I want to achieve a layout like below using fix width. The width should be 600px and then I want to have some sections in the main div. And I want that the main div is aligned at the center of the page.
Im a CSS beginner and Im not achieving this result, I have a fiddle with the issues: fiddle
Its not aligned at the center of the page and also only the div .post-title is appearing properly.
Do you know what is necessary to achieve the image layout?
<div class="wrapper">
<div class="post-title">
title
</div>
<div class="post-info">
<div class="post-date">
date
</div>
<div class="post-admin">
admin
</div>
</div>
<div class="post-category">
category
</div>
<div class="post-tags">
tags
</div>
</div>
I updated your fiddle.
Here is the CSS in case it didn't work. Using flexbox.
.wrapper{
width: 600px;
display:block;
margin: auto;
border:1px solid gray;
text-align:center;
}
.post-title{
border-bottom: 1px solid gray;
padding:20px;
text-align:left;
}
.post-info{
width:100%;
display: flex;
height: 100px;
}
.post-date{
border-right:1px solid gray;
padding: 20px;
flex: 1;
box-sizing:border-box;
text-align: left;
}
.post-admin{
padding:20px;
box-sizing:border-box;
text-align: left;
flex: 1;
}
.post-category{
border-top:1px solid gray;
text-align: left;
padding:10px;
}
.post-tags{
border-top:1px solid gray;
text-align: left;
padding:10px;
}
You don't need to float everything, in fact it makes it very difficult to handle elements under your box because the floats get ripped from the document flow. Also the parent container no longer recognizes the size of the elements. You could instead use flexbox for the two elements next to each other, but for better compatibility you can also just make them inline-block.
I would wrap everything in another block (possibly just the body body if that works for you) with width: 100%; (or at least something larger than 600px) and then use margin: 0 auto; (0 top and bottom, auto left and right). I used inline-block for the date and admin blocks. Also not that you must remove the whitespace between them (I used an html comment) so they don't break.
body {
width: 100%;
}
.wrapper{
width: 600px;
display:block;
border:1px solid gray;
text-align:center;
margin: 0 auto;
}
.post-title{
border-bottom: 1px solid gray;
padding:20px;
text-align:center;
}
.post-info{
width:100%;
}
.post-date{
border-right:1px solid gray;
padding: 20px;
width:50%;
box-sizing:border-box;
display: inline-block;
}
.post-admin{
padding:20px;
width:50%;
box-sizing:border-box;
display: inline-block;
}
.post-category{
padding:10px;
box-sizing:border-box;
border-top: 1px solid grey;
}
.post-tags{
padding:10px;
box-sizing:border-box;
border-top: 1px solid grey;
}
<body>
<div class="wrapper">
<div class="post-title">
title
</div>
<div class="post-info">
<div class="post-date">
date
</div><!--
--><div class="post-admin">
admin
</div>
</div>
<div class="post-category">
category
</div>
<div class="post-tags">
tags
</div>
</div>
</body>
I am struggling to get full length left border vertically on a div.
Problem is that i can not fix the height of div as content is loaded dynamically and it can be short and long.
I tried below approach:
Approach 1
CSS
div.right-col {
position: relative;
}
div.right-col:before {
content:"";
background: #ccc;
padding-left:2.5rem;
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 1px;
}
HTML
<div class="left-col"></div>
<div class="right-col"></div>
Approach 2
CSS
.right-col {
position: relative;
}
#borderLeft {
border-left: 2px solid #f51c40;
position: absolute;
top: 50%;
bottom: 0;
}
HTML
<div class="left-col"></div>
<div class="right-col"><div id="border-left"></div></div>
Approach 3
CSS
.left-col {display:table-cell}
.right-col {
display:table-cell;
border-left: 1px solid #ccc;
padding-left: 2.5rem;
float: none;
height:auto;
}
HTML
<div class="left-col"></div>
<div class="right-col"></div>
But none of above things are working. Border is only till where content is present.
Is someting like that what you are looking for ?
<div>
<div style="height:100%;display:inline-block;background-color:#FF0000;">LEFT</div>
<div style="height:100%;display:inline-block;background-color:#0000FF;">RIGHT</div>
</div>
Otherwise, it may be easier to use bootstrap and the row & col-xx class.
Html
<div class="main">
<div class="left-col">sdfsdfsdf</div>
<div class="right-col">sdfsdfsdf
<br>
sdfsdfsdf
</div>
</div>
Css
.left-col {display:table-cell; width:100%; background-color: red;}
.right-col {
display:table-cell;
border-left: 1px solid #ccc;
padding-left: 2.5rem;
float: none;
height:auto;
background-color: green;
}
.main{
display:table;
}
Demo
This is sometimes referred to as the Holy Grail Problem and there are a number of hacks for it. However the first 'real' fix i believe is the flexbox. Here is how i would solve your problem:
Fiddle
HTML
<div class="container">
<div class="col left">Hi</br>Let's see how this works.</div>
<div class="col right">Hi</div>
</div>
CSS
.container, .col {
display:flex;
}
.container {
flex:1;
flex-direction:row;
}
.col {
flex-direction:column;
}
.col.right {
border-left: 1px solid black;
}
.col.left {
order:-1;
}
This is my code
table#projectTable > tbody , table#productTable > tbody{
height: 300px;
overflow: auto;
}
The scroll bar is working if you click the upper part but not the lower part.
Very strange.
I used firefox inspect element and I think its something to do with the TR element overlapping because the scrollbar is working fine just above the (imaginary extended line from ) second row (Edit product info)
as i say at comments
.innerDiv{position:absolute;top:80px;left:185px;z-index:10;}
will solve your problem.
maby you already know but if you dont may i kindly suggest you that give a chance to tableless design when you design a layout.
for example - also this sample could be better -
preview
HTML
<div id="container">
<div id="left">
Edit branchInfo
Edit branchInfo
Edit projectList
</div>
<div id="right">
<div id="table1"> ...1... </div>
<!--#table1-->
<div id="table2"> ...2... </div>
<!--#table2-->
<div id="table3"> ...3... </div>
<!--#table3-->
</div>
<!--#right-->
<div class="clear"></div>
</div>
<!--#container-->
CSS
.clear {
clear: left;
}
#container {
border: 1px solid #666;
padding: 5px 5px 0 5px;
}
#left, #right {
float: left;
}
#left a {
display: block;
width: 100px;
height: 200px;
font: 12px/200px arial;
border: 1px solid #999;
margin-bottom: 5px;
padding: 10px;
text-decoration: none;
font-weight: bold;
color: #666;
}
#left a:hover {
background: #efefef;
}
#left a:active {
background: #c0c0c0;
}
#right {
border: 1px solid #999;
margin-left: 5px;
padding: 10px;
height: 654px;
width: 900px;
}
I have a design where I need to align a header to some content in another column.
The header can be of variable length so I am trying to work out how to align the border-bottom in all cases.
(The below is just some demo code to highlight my issue)
<div class="container">
<div class="header-container">
<h1>Short title</h1>
</div>
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
.header-container
{
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
float: right;
border-bottom: 1px solid #bbb;
}
Please see
http://jsfiddle.net/bmxSY/
So in the case of the short title the first line should be blank. Is there anyway of doing this with pure css. I might do a count on the characters and add a margin-top but this isnt 100% fool proof.
EDIT*
The real issue here was that the header needed to align with content in a different containing div. So the Example HTML Markup and CSS should really have been more like...
<div class="container">
<div class="span4">
<div class="header-container">
<h1>Short title</h1>
</div>
</div>
<div class="span8">
<div class="header-container">
<h1>This is a much longer title title</h1>
</div>
</div>
</div>
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
}
.span4
{
width:60%;
float: left;
}
.span8
{
width:40%;
float: left;
}
The easiest method is with display: inline-block: http://jsfiddle.net/thirtydot/bmxSY/7/
.container {
text-align: right;
}
.header-container {
width: 200px;
font-size: 1.4em;
margin: 10px 20px;
border-bottom: 1px solid #bbb;
text-align: left;
display: inline-block;
vertical-align: bottom;
}
Actually it is not possible, but by tricking, we can do it.
.outer {
position:relative;
display:table;
height: 200px;
width: 200px;
vertical-align: middle;
text-align: center;
border: 1px solid #CCCCCC;
background:red;
float:left
}
.inner {
width:100%;
display:table-cell;
vertical-align:bottom;
position:relative;
}
p{background:blue;border:1px solid #000}
Demo: http://www.pmob.co.uk/temp/vertical-align9.htm
Use table-cell to align the div o the bottom of the parent.
unfortunately dispaly:table-cell doesn't support margin option so you need to manipulate it through border.
CSS
.container{display:table-row; float:right}
.header-container
{
width: 200px;
font-size: 1.4em;
border-right:20px solid white; border-left:20px solid white;
border-top:10px solid white; border-bottom:10px solid white;
border-bottom: 1px solid #bbb;
display:table-cell; vertical-align:bottom
}
DEMO
I'd like to have a [Fixed][Liquid][Fixed] cross-browser compatible layout.
HTML:
body
div#col-1
div#col-2
div#col-3
CSS:
#col-1 {
width:150px;
float:left;
}
#col-2 {
width:100%;
padding:0 150x;
}
#col-3 {
positon:absolute:
right:0;
width:150px;
}
Would this work/better way to do it?
This is pretty simple.
here is the code
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
</body>
</html>
I'm using floats instead of position absolute. The advantage of using floats above absolute positioning is that you can put a nother div beneath it, lets say the footer. And just give it a clear: both and it will automatically display at the bottom of the page.
here is an example with a footer
<html>
<head>
<style type="text/css">
#left {
float: left;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#right {
float: right;
width: 150px;
border: 1px solid black;
background-color: #999;
height: 50px;
}
#center {
/* margin with 10px margin between the blocks*/
margin: 0 160px;
border: 1px solid black;
height: 50px;
}
#footer {
clear: both;
margin-top: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</body>
</html>
Voila! You've got your liquid layout.
check this out:
http://siteroller.net/articles/3-column-no-tables-no-floats
But no,I don't think that would work. There are plenty of links in said article though to address your issue.
And if there is any interest, I will extend what is written there.
Okay, got it: http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-31-fixed-fluid-fixed/
I like Robert's answer. I would also add a wrapper around the left, right, center and footer. Here, I set the id to "page":
<body>
<div id="page">
<div id="left">Text</div>
<div id="right">Text</div>
<div id="center">Text</div>
<div id="footer">footer</div>
</div>
</body>
Then, you can also add the style for the "page":
#page {
min-width: 600px;
}
This way, if the user shrinks their browser down to a very small size, the content still looks good.