I have been working on a project where i have to put together images of excel sheets. It should look like a unique table from all the images, where the last two should be side by side. I have tried to write something, but the space between images and the margins between the last two images are giving me headaches right now. Your help will be very appreciated.
//***CSS file
.crop img
{
height: 791px;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
margin-top: 0;
width: 850px;
display: block;
}
.LeftTable
{
float: left;
}
.RightTable
{
float: right;
width: 400px; //when increasing over 400px, the image on right gets closer but goes underneath of the one on left side.
}
//**HTML file
<div class="crop">
<img src="QATables/image1.png">
<img src="QATables/image2.png">
<img src="QATables/image3.png">
<img src="QATables/image4.png">
<div class="LeftTable">
<img src="QATables/image5.png">
</div>
<div class="RightTable">
<img src="QATables/image6.png">
</div>
</div>
I would like to add to MathSquared11235's answer. It always helps to reset margins and padding. Let me say that again... it ALWAYS helps to reset margins and padding. Different browsers have different default margins and paddings, if you don't reset them, it will be impossible to make your website look the same among all browsers. And this could also be the problem you're currently facing as the browser you're using, may "add" unwanted margins or padding. And don't just reset them on a particular element such as suggested "div". I would recommended placing this at the top of your css...
// * { margin:0; padding:0; }
The asterisk (*) simply means "everything". So everything will have a margin of 0 and a padding of 0 until you add it yourself. Yes, you will need to add the wanted margin and padding to every element... but that's a good thing rather than allowing the browsers to individually decide that for you.
I hope this helps.
I'm not sure I completely understand what you're doing, but I've answered the question as best I could. If I misunderstood, please clarify and I'll try again.
Assuming you just want to make sure that the last image lines up perfectly with the second to last image, you can just change the float from right to left, here's a jsfiddle: http://jsfiddle.net/mcabrams/qB9fA/
// relevant code:
.LeftTable
{
float: left;
}
.RightTable
{
float: left;
width: 400px;
}
you need to set .crop{ width: 1700px; } and .right{ float: left; } it goes under because there are no space to put it next to the img of left.
jsfiddle: http://jsfiddle.net/2usCh/
If you are using Internet Explorer, know that it is very glitchy. I mean very glitchy. I read on another SO post which I, unfortunately, cannot find right now, that the cause of your glitch may be newlines in the HTML which IE very helpfully thinks are typographic spaces that you want to put into the text.
Also, you might do
div {margin: 0; padding: 0;}
if your layout permits. It will remove any space around the images.
Hope this helps!
Related
I am completely stuck trying to get a left chevron and a right chevron to display on either side of a date in an h1 tag. I want a user to be able to click on either chevron to move forward or backward one day. However, no matter what combination of div or img classes and position, float, display it still looks like the screenshot attached, even though I've made sure the document is updating.
How can I modify the HTML/CSS so the chevrons are placed on the same line as the date?
<div class= "dater">
<div class="chevron-left">
<img src="glyphicons-225-chevron-left.png"/>
</div>
<h2><%= #todie %></h2>
<div class="chevron-right">
<img src="glyphicons-224-chevron-right.png"/>
</div>
</div>
EDIT: My solution based on Rob's answer.
.chevron-right img {
float: right;
}
.chevron-left img {
float: left;
}
.dater {
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 60px;
margin-bottom: 40px;
}
.dater h2 {
text-align: center;
font-weight: 400;
float: left;
}
The reason for your problem is you have the images contained within block level elements which occupy the full width of the browser viewport. Even then it won't work exactly as you wish but there are many ways to accomplish it.
First, you can put the images inside the <h2> to the left and right of the text. That's the easiest way.
Second, you can use the CSS pseudo classes ::before and ::after
You can also set the width of the <h2> and float the everything, images included but the must be set to inline to help this along.
There are more ways than just those.
I am building a website here: argit.bounde.co.uk
I have been searching for hours to try and find the solutions. I am trying to build my own slider which will be fluid width so I cant define height / width where possible. I have got the bulk of the slider working with stock images however when I put elements underneath it they are 5px lower than they are meant to be. This happens in all browsers except IE that I have tested. I want to give the banner which is underneath my slider a negative top margin so that it will display over the slider but until I can figure out what is causing this 5px margin I cant.
The html is here:
<div id="slider">
<div id="sliderwidth">
<ul>
<li><img src="imgs/slider/img1.jpg" alt="image 1"></img></li>
<li><img src="imgs/slider/img2.jpg" alt="image 2"></img></li>
<li><img src="imgs/slider/img3.jpg" alt="image 3"></img></li>
<li><img src="imgs/slider/img4.jpg" alt="image 4"></img></li>
</ul>
</div>
</div>
<div id="sliderborder">
Things I have tried:
Removing all jQuery: didnt work.
Removing all CSS styling the slider: didnt work.
Setting img height to 300px: didnt work.
Setting li height to 300px: worded.
replacing imgs with divs 300px high: worked.
setting padding 0, margin 0 to every element in the slider: didnt work.
checked for validation errors: fully validated.
checked imgs are 300px high: they are.
checked every element in dev tools to check for any rogue margin/padding: none found.
I am literally out of ideas, any help would be greatly appreciated!!
There is nothing strange... Just add display:block to your images.
By default all images are inline-elements (inline or inline-block) and handled as a line of text. This space is where the hanging part of a y or gwould go. This very poorly explained but you get the idea.
div#slider ul li img {
width: 100%;
display: block;
}
just try with
div#slider ul img {
display: block;
width: 100%;
}
or
div#slider ul img {
vertical-align: top;
width: 100%;
}
since, by default, images are inline-block elements so they may need a proper vertical-align setting
All you have to do is just add vertical-align: bottom; like this:
div#slider ul li img {
width: 100%;
vertical-align: bottom;
}
For some reason, I just had a 5px margin at the top of my website and to the left side. I couldn't get rid of it... until I set the margin on the body element to 0. Problem solved. Hope this helps anyone that comes across this annoying issue. :)
I could find a work around for this if I wanted but it seems wrong and am trying to learn to code in a neater way.
Basically I have a div with 3 images in it, the div is 700px, and each image is 220px,
So thats 660px with two 20px gaps left and right of the centre image, and the outside images going all the way to their end of the div.
Is there a quicker way of doing this without setting up seperate ids for each image?
.contentpictureblock { float:left; }
.contentpictureblock img {
margin-right:20px;
}
<div class="contentpictureblock">
<img src="http://...">
<img src="http://...">
<img src="http://...">
</div>
Doing the above^ pushes the third image to the next line, which is understandable. I know I could always make seperate divs for each image, and adjust the margins for each one but Im just wondering is there a quicker one off overflow type command that I could apply to the above? It would mean the right margin would be on all the images but would have no effect on its positioning in the last image.
Thanks for the help.
Use last-child selector:
.contentpictureblock img {
margin-right: 20px;
}
.contentpictureblock img:last-child {
margin-right: 0;
}
Modify the last image with an additional class:
<img src="..." class="last">
CSS rule:
.contentpictureblock img.last {
margin-right: 0;
}
Negative margins on the div.contentpictureblock will also do it. If there's a possibility that you will have more than 3 images, then this is what you will want to do.
div.contentpictureblock { margin-left: -20px; overflow: hidden }
i have a header, which takes the whole width of the screen. in my header i want to place 3 divs, which should be aligned next to each other. the div's on the side being fixed-width, and the middle should take the other space available. so i don't know the width of the header, and i don't know the width of the middle container.
right now i have this code:
html:
<div id="header">
<div id="menu-container">
menu goes here
</div>
<div id="logo-container">
logo goes here
</div>
<div id="music-player-container">
music player comes here
</div>
</div>
and css:
#header {
height: 200px;
margin: 0;
padding: 0;
border: 0;
}
#menu-container {
width: 400px;
height: inherit;
float: left;
}
#logo-container {
height: 100%;
background-image: url('../images/logo.png');
background-repeat: no-repeat;
background-position: center;
float: left;
width: auto;
}
#music-player-container {
width: 400px;
height: inherit;
float: left;
}
which should be working according to other problems with the float.... it doesn't
You can use floated divs with negative margins:
http://jsfiddle.net/cy5E7/1/
In your case:
http://jsfiddle.net/AjVHy/
Negative margins are better then just left/right float fixed divs. We don't get messed layout if user have very small window. Look at this bad example (resize browser window to small width): http://jsfiddle.net/surendraVsingh/qZLHb/1/ (thanks to #SVS). In normal float layout, all floated divs are on place only if parent container is wide enough.
Another disadvantage of standard float layout is when we want column layout but we don't know height of middle content, look like it can look
float layout, dynamic content height
negative margins layout, dynamic content height
Switch the order of your second and third divs then use this CSS.
#menu-container, #music-player-container {
float:left;
width: 400px;
}
#music-player-container {
float:right;
}
#logo-container {
margin:0 400px;
}
jsfiddle example
I'm not exactly sure of what you are planning to code up, but in my perspective, I see it like this: "You want to have 3 columns, column 1 being of a fixed with, column 2 a fluid width and column 3 yet again of fixed width."
What I fail to understand here is that, in the case of a really small width monitor (like a 1024x768 resolution, for instance), having a 400px column on both sides would leave you with just 224px of logo space. It would look un-natural.
Anyways, if you would still like to continue, I suggest you enclose all the three divs [menu-container, logo-container & music-player-container] inside another element called header (If you're using HTML5) or another div with any name you like (If you're using <= HTML 4.01) and then fix it's width to 100%; and a fixed height of 200px;.
Then let the menu-container, float: left; and the music-player-container float: right;. This will give space to the logo-container. Let the logo-container have a width: auto;. Having done this will give you a basic semi-fluid header layout, if I'm right.
Cheers, hope your question gets solved quick :)
I understand what you're trying to do, and I am sorry to say that I have yet to find a solution for this issue without using some ugly form of JavaScript/jQuery.
Essentially, the problem is that CSS does not have any properties (not even when fiddling with display properties) that will allow you to have two elements, one with fixed width and the other taking up the remainder of the space in the div. There are some options with float that can allow you to very closely simulate this, but I can tell you that they are unlikely to give you what you really want.
There is a resource out there, a project called Bootstrap, that you can install like any other jQuery plugin (or you can actually use it like a "CSS" plugin - you'll see what I mean - if you don't want the JavaScript), that will enable you to do what you want.
Here is the link: http://twitter.github.com/bootstrap/download.html
I strongly recommend that you review the documentation first to make sure you are aware of any caveats/limitations.
Good Luck!
EDIT: I like rogal's answer, but before using it you should bear in mind that doing so removes your ability to add a left border and makes it very difficult to apply background images to the div with the negative margin.
another option:
#header {
display: table;
height: 200px;
margin: 0;
padding: 0;
border: none;
}
#header > div {
display: table-cell;
height: inherit;
}
#menu-container, #music-player-container {
width: 400px;
}
#logo-container {
background-image: url('../images/logo.png');
background-repeat: no-repeat;
background-position: center;
}
HTH
You could of course use a table..
-hides-
Something like this inside the header div:
<table width=100%>
<tr>
<td width=200>
menu
</td>
<td>
logo
</td>
<td width=400>
music
</td>
</tr>
</table>
(too lazy for CSS atm)
Can't think of a very good way to do this. Not an ideal solution, but you could turn this into a table.
<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
Then you can just set the dimensions of the div and the td that contains it to be the same.
I am trying to lay out a table-like page with two columns. I want the rightmost column to dock to the right of the page, and this column should have a distinct background color. The content in the right side is almost always going to be smaller than that on the left. I would like the div on the right to always be tall enough to reach the separator for the row below it. How can I make my background color fill that space?
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
<div class="separator">
<div class="rightfloat">
Some really short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
<div class="separator">
<div class="rightfloat">
Some more short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
Edit: I agree that this example is very table-like and an actual table would be a fine choice. But my "real" page will eventually be less table-like, and I'd just like to first master this task!
Also, for some reason, when I create/edit my posts in IE7, the code shows up correctly in the preview view, but when I actually post the message, the formatting gets removed. Editing my post in Firefox 2 seems to have worked, FWIW.
Another edit: Yeah, I unaccepted GateKiller's answer. It does indeed work nicely on my simple page, but not in my actual heavier page. I'll investigate some of the links y'all have pointed me to.
Ahem...
The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.
Actually, 100% height will not work in most design situations - this may be short but it is not a good answer. Google "any column longest" layouts. The best way is to put the left and right cols inside a wrapper div, float the left and right cols and then float the wrapper - this makes it stretch to the height of the inner containers - then set background image on the outer wrapper. But watch for any horizontal margins on the floated elements in case you get the IE "double margin float bug".
Give this a try:
html, body,
#left, #right {
height: 100%
}
#left {
float: left;
width: 25%;
}
#right {
width: 75%;
}
<html>
<body>
<div id="left">
Content
</div>
<div id="right">
Content
</div>
</body>
</html>
Some browsers support CSS tables, so you could create this kind of layout using the various CSS display: table-* values. There's more information on CSS tables in this article (and the book of the same name) by Rachel Andrew: Everything You Know About CSS is Wrong
If you need a consistent layout in older browsers that don't support CSS tables, you need to do two things:
Make your "table row" element clear its internal floated elements.
The simplest way of doing this is to set overflow: hidden which takes care of most browsers, and zoom: 1 to trigger the hasLayout property in older versions of IE.
There are many other ways of clearing floats, if this approach causes undesirable side effects you should check the question which method of 'clearfix' is best and the article on having layout for other methods.
Balance the height of the two "table cell" elements.
There are two ways you could approach this. Either you can create the appearance of equal heights by setting a background image on the "table row" element (the faux columns technique) or you can make the heights of the columns match by giving each a large padding and equally large negative margin.
Faux columns is the simpler approach and works very well when the width of one or both columns is fixed. The other technique copes better with variable width columns (based on percentage or em units) but can cause problems in some browsers if you link directly to content within your columns (e.g. if a column contained <div id="foo"></div> and you linked to #foo)
Here's an example using the padding/margin technique to balance the height of the columns.
html, body {
height: 100%;
}
.row {
zoom: 1; /* Clear internal floats in IE */
overflow: hidden; /* Clear internal floats */
}
.right-column,
.left-column {
padding-bottom: 1000em; /* Balance the heights of the columns */
margin-bottom: -1000em; /* */
}
.right-column {
width: 20%;
float: right;
}
.left-column {
width: 79%;
float: left;
}
<div class="row">
<div class="right-column">Right column content</div>
<div class="left-column">Left column content</div>
</div>
<div class="row">
<div class="right-column">Right column content</div>
<div class="left-column">Left column content</div>
</div>
This Barcamp demo by Natalie Downe may also be useful when figuring out how to add additional columns and nice spacing and padding: Equal Height Columns and other tricks (it's also where I first learnt about the margin/padding trick to balance column heights)
I gave up on strictly CSS and used a little jquery:
var leftcol = $("#leftcolumn");
var rightcol = $("#rightcolumn");
var leftcol_height = leftcol.height();
var rightcol_height = rightcol.height();
if (leftcol_height > rightcol_height)
rightcol.height(leftcol_height);
else
leftcol.height(rightcol_height);
Here's an example of equal-height columns - Equal Height Columns - revisited
You can also check out the idea of "Faux Columns" as well - Faux Columns
Don't go the table route. If it's not tabular data, don't treat it as such. It's bad for accessibility and flexibility.
I had the same problem on my site (shameless plug).
I had the nav section "float: right" and the main body of the page has a background image about 250px across aligned to the right and "repeat-y". I then added something with "clear: both" to it. Here is the W3Schools and the CSS clear property.
I placed the clear at the bottom of the "page" classed div. My page source looks something like this.
body
-> header (big blue banner)
-> headerNav (green bar at the top)
-> breadcrumbs (invisible at the moment)
-> page
-> navigation (floats to the right)
-> content (main content)
-> clear (the quote at the bottom)
-> footerNav (the green bar at the bottom)
-> clear (empty but still does something)
-> footer (blue thing at the bottom)
I hope that helps :)
No need to write own css, there is an library called "Bootstrap css" by calling that in your HTML head section, we can achieve many stylings,Here is an example:
If you want to provide two column in a row, you can simply do the following:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="row">
<div class="col-md-6">Content</div>
<div class="col-md-6">Content</div>
</div>
Here md stands for medium device,,you can use col-sm-6 for smaller devices and col-xs-6 for extra small devices
The short answer to your question is that you must set the height of 100% to the body and html tag, then set the height to 100% on each div element you want to make 100% the height of the page.
A 2 column layout is a little bit tough to get working in CSS (at least until CSS3 is practical.)
Floating left and right will work to a point, but it won't allow you to extend the background. To make backgrounds stay solid, you'll have to implement a technique known as "faux columns," which basically means your columns themselves won't have a background image. Your 2 columns will be contained inside of a parent tag. This parent tag is given a background image that contains the 2 column colors you want. Make this background only as big as you need it to (if it is a solid color, only make it 1 pixel high) and have it repeat-y. AListApart has a great walkthrough on what is needed to make it work.
http://www.alistapart.com/articles/fauxcolumns/
I can think of 2 options
Use javascript to resize the smaller column on page load.
Fake the equal heights by setting the background-color for the column on the container <div/> instead (<div class="separator"/>) with repeat-y
Just trying to help out here so the code is more readable.
Remember that you can insert code snippets by clicking on the button at the top with "101010". Just enter your code then highlight it and click the button.
Here is an example:
<html>
<body>
<style type="text/css">
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
</style>
This should work for you: Set the height to 100% in your css for the html and body elements. You can then adjust the height to your needs in the div.
html {
height: 100%;
}
body {
height: 100%;
}
div {
height: 100%; /* Set Div Height */
}
It's enough to just use the css property width to do so.
Here is an example:
<style type="text/css">;
td {
width:25%;
height:100%;
float:left;
}
</style>
.rightfloat {
color: red;
background-color: #BBBBBB;
float: right;
width: 200px;
}
.left {
font-size: 20pt;
}
.separator {
clear: both;
width: 100%;
border-top: 1px solid black;
}
<div class="separator">
<div class="rightfloat">
Some really short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>
<div class="separator">
<div class="rightfloat">
Some more short content.
</div>
<div class="left">
Some really really really really really really
really really really really big content
</div>
</div>