I'm new to CSS and was wondering if there was any way to stop the text selection color going into the 'gutter' (I think that's the term?) like here:
I know it's something pretty trivial but I've noticed that none of the professional (online) websites that use a gap between columns have this problem.
If you float the column, it doesn't experience this issue.
So one solution seems to be floating both columns, but then I'm left with the issue of making a gap between the columns and the footer (I'd have to specify how much margin-top (no. of pixels from the header) I want for it, which isn't very dynamic).
Does anyone have any ideas?
Here is the current CSS code for it:
.box /*this is applied to all the divs*/
{
border: 1px black dotted;
padding:3px;
}
body
{
width: 850px;
margin: 0 auto;
}
#panel0
{
background-color: blue;
}
#panel1
{
background-color:red;
width: 400px;
float:right;
}
#panel2
{
background-color:brown;
width:400px;
}
#panel3
{
background-color:yellow;
clear: right;
}
Try this:
#panel2
{
background-color:brown;
width:400px;
overflow: hidden;
}
That should do it.
Related
I know this questions has already been answered before and I've read the topics :
Make div take all space left after another div
Expand div to take remaining width
Expand div to max width when floatleft is set
The magic of overflow hidden (external)
However I can't manage to implement them in my case or they simply don't seem to work as I try to have a fix width on the right and a flexible width on the left (unlike the above examples).
Here is my problem (which is fairly simple) : I have a form with a search field (left) and a span element (right). The span element has a fixed width and height. I want the input to fit the remaining left space.
form :
<div id="container">
<form>
<input type="search" />
<span class="submit"></span>
</form>
</div>
style.css :
#container {
width: 300px;
}
[type="search"] {
/* Positionning
* ------------ */
display: block;
height: 40px;
padding: 0px 10px;
vertical-align: top;
}
.submit {
/* Positionning
* ------------ */
display: block;
height: 40px;
width: 50px;
/* Styling
* ------- */
background-color: #CF0526;
}
From what I've read, I thought that a width: 100%; overflow: hidden on the input and a float: right on the span who be enough, sadly not. Here is a jsfiddle of my problem, hopefully it may help you.
EDIT: I changed the title from "left div" to "left input" as it may matter, especially since this solution does not work while it looks accurate for divs positionning.
You can try with the property calc like this:
input[type="search"] {
width: calc(100% - 40px);
margin:0;
padding:0;
height:30px;
float:left;
}
.submit {
float:left;
width: 40px;
height: 30px;
background-color: red;
}
The demo http://jsfiddle.net/SL3FB/10/ ... Maybe a problem the compatibility
Another solution using box.sizing who has more compatibility: http://jsfiddle.net/SL3FB/18/
You can substract the width from the span to the width from the textfield which is 100%.
Here is the fiddle http://jsfiddle.net/SL3FB/15/.
Code is like this:
width:calc(100% - 50px);
float:left;
Make 'em both float:left; to have a better result!
Hope this works for you.
Use CSS Tables
1) Set display: table-cell for both the input and the span
2) Set a fixed width on the span and (the trick:) width:100% on the input
FIDDLE
#container {
width: 300px;
border: 1px solid black;
}
form
{
display:table;
width: 100%;
}
.submit {
display:table-cell;
width: 40px;
height: 30px;
background-color: red;
}
input
{
width: 100%;
display:table-cell;
}
Does this work for you?
http://jsfiddle.net/SL3FB/4/
I've given your search a width of 85% so it fits up agains the red box.
.search {
width:85%;
}
It regularly occurs that I want to center a css box inside another one both vertically and horizontally. What's the simplest way to do so that satisfies the following constraints?
The box should be precisely centered, not approximately.
The technique should work in modern browsers and in IE versions back to 8
The technique should not depend on explicitly knowing the width or height of either the centered content or the containing box.
I generally know the container is larger than the content, but supporting larger content (which then overflows symmetrically) would be nice...
The underlying content of the container must still be able to respond to clicks and hovers except where obscured by the centered content
I currently use 4 (!) nested divs to achieve this, with css along the following lines:
.centering-1 {
position:absolute;
top:0; left:0; right:0; bottom:0;
text-align:center;
visibility:hidden;
}
.centering-2 {
height:100%;
display:inline-table;
}
.centering-3 {
display:table-cell;
vertical-align:middle;
}
.centering-content {
visibility:visible;
}
You can see this in action as a jsbin snippet.
However, this approach, while workable, feels like extreme overkill due to the large number of wrapper divs, and it doesn't work with content that's larger than the container. How can I center things in CSS?
Horizontal centering is easy:
.inner {
width: 70%; /* Anything less than 100% */
margin-left: auto;
margin-right: auto;
}
But vertical centering is a little tricky. The best technique for modern browsers is to combine inline-block and a pseudo elements. This originates from "Ghost element", the last technique at http://css-tricks.com/centering-in-the-unknown/. It sets adds a pseudo-element and uses inline-block styles get the centering.
The CSS:
.outer {
height: 10rem;
text-align: center;
outline: dotted black 1px;
}
.outer:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.inner {
width: 10rem;
display: inline-block;
vertical-align: middle;
outline: solid black 1px;
}
An example on Codepen: http://codepen.io/KatieK2/pen/ucwgi
For simpler cases, the following may be good options:
For single lines of content, you can do a quick and dirty vertical centering job on the text within an element by using line-height larger than your font-size:
.inner {
border: 1px solid #666;
line-height: 200%;
}
The solution with widest support is to use a non-semantic table. This works with very old versions of IE and doesn't require JavaScript:
td.inner {
vertical-align: middle;
}
And here is simple solution for known height elements (which could be in ems, not px):
.outer {
position:relative;
}
.inner {
position: absolute;
top:50%;
height:4em;
margin-top:-2em;
width: 50%; left: 25%;
}
You can get by with 2 fewer elements. Anything less than this is going to require things that IE8 (and IE9) doesn't support.
http://cssdeck.com/labs/0ltap96z
<div class="centering-1">
<div class="centering-2">
<div class="intrinsically-sized-box">
<p>You can put any content here too and the box will auto-size.</p>
</div>
</div>
</div>
CSS:
body {max-width:750px;}
.generalblock {
margin-top:2em;
position:relative;
padding:10px;
border:20px solid cyan;
font-size: 18px;
}
.centering-1 {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
text-align:center;
visibility:hidden;
display: table;
width: 100%;
}
.centering-2 {
display:table-cell;
vertical-align:middle;
}
.intrinsically-sized-box {
visibility:visible;
max-width:300px;
margin: 0 auto;
background: yellow;
position:relative;
border:1px solid black;
}
http://www.ugiinc.com/products/
I am new to all of this so please bear with me.
I used float right on subpages-text and subpages-excerpt and clear on the excerpt to get it to sit right under the link, Works fine in other browsers but in IE the excerpt sits below the image, still on the right. Is this the ideal way of doing this? Is there something i can do to fix it for IE?
.subpages-row {
border-bottom: 4px solid black;
border-top: 4px solid black;
}
.subpages-cell {
width: 800px;
}
.subpages-text {
float:right;
}
.subpages-excerpt {
clear: both;
float: right;
width: 370px;
}
Try modifying your CSS like this (/**/ added on any lines that are new/different):
.subpages-text {
float:right;
width: 500px; /**/
text-align: right; /**/
}
.subpages-images-image {
float: left; /**/
}
.subpages-excerpt {
clear: none; /**/
float: right;
width: 370px;
}
The problem you were having was with clear: both; on .subpages-excerpt. If you get rid of that, the text jumps back up to the top. We also float the image left so it won't interfere with the text. Then, if you increase the width of the title so that the excerpt never fits on the top line, it will pop right under the title. Lastly, since we increased the width of the title, it needs text-align: right so that it still appears on the right side.
Basically, the current setup has space between the top of the page and the #header div. I want to remove that space. Tried searching, came up with adding
position:absolute;top:0;left:0;
to the #header div, it works (positions it at the top without space) but the rest of my divs loose all their structure. How to position it at the very top and preserve the current layout of the rest of the divs?
I am also using an image underneath the divs as a background. Using this code.
body
{
background-image:url('../imagez/bestone1400.jpg');
background-repeat:no-repeat;
background-position:top, center;background-size:100%; 2000px;
}
Thanks in advanced.
#container
{
width:100%;
}
#header
{
background-color:#FFA500;
height:400px;
}
#leftcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:left;
}
#content
{
background-color:#EEEEEE;
height:200px;
width:80%;
float:left;
}
#rightcolumn
{
background-color:#FFD700;
height:200px;
width:10%;
float:right;
}
#footer
{
background-color:#FFA500;
clear:both;
text-align:center;
}
There is likely padding or margin on html or body. Try something like:
html, body {
padding: 0;
margin: 0;
}
There may also be padding or magins on divs or other elements, so a universal selector might work:
* {
padding: 0;
margin: 0;
}
But it is generally good practice to implement a css reset, like this one, which may be the best solution.
You should remove the Default browser padding, margin and border, use:
/*reset default browser settings */
html, body {
margin: 0px;
padding: 0px;
border: 0px;
}
So I'm building a page that will be used by multiple companies, but I'm having some issues. In the first example, with the code for just the two divs, looks fine, but I'd like some space between each row. I've also posted the css below. Then in the second link, I've pasted the code with a layout of one of the companies that will use the code. It looks better but it pushes the sidebar down.
http://tinyurl.com/bo6ukqe
http://tinyurl.com/cerzfwd
So I'm curious what's the best way to fix this. I need the left div and right div to line up. Currently
I want the left and right div to line up. Meaning, both are the same height.
I'd like if there's a little bit of space between each row. Currently, the pictures are right on top of each other.
I'd like the right div's size to depend on how much room it has. So instead of one company having to have it at 55% because of a sidebar, then another company has to change it to 80% because it doesn't have a sidebar.
Here's the css if you prefer no to dig through the code in the above links:
<style type="text/css">
.body { border : 1pt solid black; }
.left { clear: left; float : left; width:226px; height:127px; }
.right { float : right; width : 80%; }
.spacer { clear : both; height: 10px; }
img { border: none; }
p.description {
line-height:18px;
color:#767676;
font-size:12px;
}
p.description a {
font-weight:bold;
}
a.read-more-link {
border-top:none;
text-transform: uppercase;
margin:0; padding:0;
font-size:10px;
}
.read-more a {
border-top:none;
display: block;
text-align: right;
text-transform: uppercase;
margin:15px 0 0 0; padding:0;
text-decoration: none;
}
</style>
For #1 and #2:
Put a wrapper div around each row. Since you are floating the child elements that wrapper will also need to be floated in order for it to respect inner heights so that your margins will push a sibling:
<div style="float: left; width: 100%; clear: both; margin: 0 0 10px 0;"></div><!-- wrapper row -->
For #3:
You will need to learn responsive web design.
First, you haven't closed .content_left, do this by adding </div> just before <div class="content_right"></div>
Then encapsulate each of the following in a <div class="row"></div>
<div class="left"></div><div class="right"></div>
then add
.row {
padding: 5px 0;
margin-left: 0;
margin-right: 0;
width: 60%;
}
then
.content_right {
width: 40%;
}