It's been while since I have done some css design work. I have a 3 column lower section marked up in my html like:
<section id="lowerContent">
<section id="lcLeft"></section>
<section id="lcMiddle"></section>
<section id="lcRight"></section>
</section>
I have my css for the sections like this:
section#lowerContent {
width: 958px;
border-left: 1px solid grey;
border-right: 1px solid grey;
height: 405px;
overflow:hidden;
}
section#lcLeft {
width: 216px;
float:left;
height: 100%;
border-right: 1px solid grey;
}
section#lcMiddle {
width: 428px;
float:left;
height: 100%;
border-left: 1px solid grey;
border-right: 1px solid grey;
margin-left: 5px;
}
section#lcRight {
width: 299px;
float: right;
height: 100%;
border-left: 1px solid grey;
margin-left: 5px;
}
If you add up the sections with margins and borders it is 957px so I have 1px to spare inside the lowerContent section. My problem is in IE8 and FF. When I do ctrl + or ctrl - the last div is pushed to the second line and not holding its position. It works correctly in chrome, opera, and safari. Can anyone tell me what I'm missing?
Thanks
My Solution:
First I changed the markup to the following:
<section id="lowerContent">
<section id="lcLeft">
<section id="lcLeftInner"></section>
</section>
<section id="lcMiddle">
<section id="lcMiddleInner"></section>
</section>
<section id="lcRight">
<section id="lcRightInner"></section>
</section>
</section>
The css works for all the major browsers and you can ctrl+ and ctrl - without the layout breaking.
section#lowerContent {
width: 960px;
height: 405px;
}
section#lcLeft {
width: 218px;
height: 100%;
}
section#lcLeftInner {
width: 216px;
border-left: 1px solid grey;
border-right: 1px solid grey;
}
section#lcMiddle {
width: 442px;
height: 100%;
}
section#lcMiddleInner {
width: 430px;
border-left: 1px solid grey;
border-right: 1px solid grey;
margin-left: 5px;
margin-right: 5px;
}
section#lcRight {
width: 300px;
height: 100%;
}
section#lcRightInner {
width: 298px
border-left: 1px solid grey;
border-right: 1px solid grey;
}
Hope that helps someone.
It works correctly in IE8 and FF,too: that's what's supposed to happen when you float those things. When you control+ the page, the floated divs have no place to go but down. If you want them all to line up horizontally, you can give each a z-index; or you can put them in a table.
Try #lcMiddle place after #lcRight and set margin: 0 305px 0 222px and remove float.
Related
pretty sure it has been answered somewhere but I couldn't find anything.
I'm trying to set up the blog post page and would like the content to be screen-centered with the sidebar to stick to the right. like below. Thanks for your help.
image of the layout I try to achieve
.main-div{
width: 100%;
border: 5px solid black;
justify-content: center;
padding: 1px;
}
.div-1{
margin: 0px auto 0px auto;
height: 1000px;
width: 300px;
border: 5px solid black;
}
.div-2{
position: fixed;
right:10px;
top:30px;
height: 200px;
width: 200px;
border: 5px solid black;
}
<div class="main-div">
main-div
<div class="div-1">div-1</div>
<div class="div-2">div-2</div>
</div>
Say I've got a div .parent which contains another div .child. Can I, and if so, how do I show an indication (i.e. an icon) when .child exceeds the width of .parent, using CSS?
I've accomplished my goal using jQuery (see below example), but I'm looking for a CSS only solution, as I'm trying to keep my jQuery usage as low as possible.
Note: the .child div has a dynamic width.
Another note: I prefer not to edit the content of the divs
var x = $('.child').offset().left + $('.child').width();
var y = $('.parent').offset().left + $('.parent').width();
if (x > y) {
var z = x - y;
$('.child')
.append($('<div></div>')
.css('left', z - 10)
.css('position', 'absolute')
.css('top', $('.child').height() / 2 - 10)
.text('>'));
}
.parent {
position: relative;
border: 1px solid #000;
height: 200px;
width: 200px;
overflow: hidden;
}
.child {
position: absolute;
top: 40px;
border: 1px solid red;
height: 100px;
width: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="parent">
<div class="child">
Some text
</div>
</div>
I read your question and comments. And i had an idea.
Yes i think best way for your problem is use javascript.
But I decided to find alternatives :)
That's why i spent 10 minutes of time on this solution.
Yes it's work only for webkit browsers. But it's possible.
.parent {
position: relative;
border: 1px solid #000;
height: 200px;
width: 200px;
overflow:auto;
}
.child {
position: absolute;
top: 40px;
border: 1px solid red;
height: 100px;
width: 400px;
}
.parent1 {
position: relative;
border: 1px solid #000;
height: 200px;
width: 200px;
overflow:auto;
}
.child1 {
position: absolute;
top: 40px;
border: 1px solid red;
height: 400px;
width: 100px;
}
::-webkit-scrollbar {
background: transparent;
}
::-webkit-scrollbar-button:horizontal:end {
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid transparent;
border-left:8px solid red;
}
::-webkit-scrollbar-button:vertical:end {
border-left: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 8px solid transparent;
border-top:8px solid blue;
}
<div class="parent">
<div class="child">
Some text
</div>
</div>
<div class="parent1">
<div class="child1">
Some text
</div>
</div>
I'm trying to center a div in the web browser when there is enough space. If not it should be collapsed between 2 divs.
This is the collapsed view
And this would be the expanded view
I've tried so many different things but nothing seems to work right. When I get something that looks right, the filterDiv ends up going over the top of titleDiv or buttonDiv or both.
Here's some code that I started with and should represent the collapsed view when the browser isn't very wide.
<style type="text/css">
.controlsDiv{
background-color:yellow;
border: 1px solid black;
}
.titleDiv{
background-color:Red;
width:25em;
height: 5em;
border: 1px solid black;
}
.filterDiv {
background-color: gainsboro;
width: 600px;
height: 10em;
border: 1px solid black;
}
.buttonDiv{
width:25em;
height:5em;
background-color:green;
border: 1px solid black;
}
</style>
<div class="controlsDiv" >
<div class="titleDiv">
<h2>titleDiv</h2>
</div>
<div class="filterDiv">
<h2>filterDiv</h2>
<h2>Centered in Browser Window</h2>
<h2>titleDiv and ButtonDiv Collapsed</h2>
</div>
<div style:clear:both></div>
<div class="buttonDiv">
<h2>buttonDiv</h2>
</div>
</div>
Thank you in advance!
You can always position absolute required div:
<style type="text/css">
.controlsDiv{
background-color:yellow;
border: 1px solid black;
}
.titleDiv{
background-color:Red;
width:25em;
height: 5em;
border: 1px solid black;
}
.filterDiv {
background-color: gainsboro;
width: 600px;
height: 10em;
border: 1px solid black;
}
#media(min-width: 900px) {
.filterDiv {
position: absolute;
left: calc(50% - 300px);
top: 0;
}
}
.buttonDiv{
width:25em;
height:5em;
background-color:green;
border: 1px solid black;
}
</style>
I've the below html code.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" style="margins">
<head>
<meta charset="utf-8" />
<style type="text/css">
.main {
width: 900px;
height: 320px;
border: 1px solid black;
position:relative;
}
.margins {
padding:10px 10px 10px 10px;
border: 1px solid black;
}
.top_H {
width: 720px;
height: 80px;
border: 1px solid black;
}
.mid {
display: inline-block;
clear: both;
margin-top: 10px;
margin-bottom: 10px;
border: 1px solid black;
}
.mid_L {
width: 200px;
height: 120px;
float: left;
margin-right:10px;
border: 1px solid black;
}
.mid_C {
width: 200px;
height: 120px;
float: left;
border: 1px solid black;
margin-right:10px;
}
.mid_R {
width: 200px;
height: 120px;
float: left;
border: 1px solid black;
}
.bot {
display: inline-block;
clear: both;
margin-bottom: 10px;
border: 1px solid black;
}
.bot_L {
width: 450px;
height: 80px;
float:left;
border: 1px solid black;
}
.bot_R {
width: 200px;
height: 80px;
float: left;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="main">
<div class="margins">
<div class="top_H"></div>
<div class="mid">
<div class="mid_L"></div>
<div class="mid_C"></div>
<div class="mid_R"></div>
</div>
<div class="bot">
<div class="bot_L"></div>
<div class="bot_R""></div>
</div>
</div>
</div>
</body>
</html>
here i am trying to create a container div(margins) inside the main div, with the gap of 10 px on each side, but when i view it in web browser it is overlapped. please let me know where am i going wrong.
Here is the fiddle.
Thanks
Offcourse it is overlapping. in your .main class you have set a height, and it's not high enough. also, if you want to be absolutely sure that nothing goes over your div, set an overflow in the css !
make height of main div auto :
.main {
width: 900px;
height: auto;
border: 1px solid black;
position:relative;
}
DEMO : http://jsfiddle.net/V9N3u/2/
Now define your .main min-height and remove height
as like this
.main {
height: 320px; // remove this
min-height: 320px; // add this
}
try this
min-height for .main class
.main {
width: 900px;
min-height: 320px;
border: 1px solid black;
position:relative;
}
The others are right about the height.
You may also want to remove the margin-bottom of .bot to get rid of the extra spacing (unless that's on purpose):
.bot {
display: inline-block;
clear: both;
margin-bottom: 10px; //remove
border: 1px solid black;
}
And you also have one too many " in your html:
<body>
...
<div class="bot_R""></div>
I'm trying to set a simple page grid. Each row consists of an optional left column, plus a main content right column. I want the right column to remain the same size at the same position even if the left column isn't present.
I figured that floating the left column and using position: relative with left: on the right column would give me the behaviour I want.
My HTML looks like this:
<div class="row">
<div class="sidebar">I'm a sidebar!</div>
<div class="main">
<p>I'm main!</p>
</div>
</div>
and my CSS looks like this:
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Here's a fiddle: http://jsfiddle.net/ttr5k/1/
To my surprise, the content of .main is shifted right (as if .main had padding-left) seemingly due to the sidebar. Why is this, and how could I solve it?
I also suspect this isn't the best way to build a grid, is there a better approach?
Add position absolute instead of relative
http://jsfiddle.net/ttr5k/2/
As you can see the text aligns left again
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: absolute;
left: 220px;
width: 500px;
border: 1px solid green;
}
I recommend doing something like this:
.row {
background:#eee;
width:90%;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:left
width: 500px;
border: 1px solid green;
overflow:auto;
clear:right;
}
Now you will be able to remove the sidebar whenever you want without adding new CSS
DEMO: http://jsfiddle.net/ttr5k/5/
OR------
if you want that space even if no sidebar and still want to content to overflow:
http://jsfiddle.net/ttr5k/7/
.row {
background:#eee;
width:600px;
overflow:auto;
border:1px solid #ccc;
margin:20px auto;
}
.sidebar {
float: left;
width: 200px;
border: 1px solid red;
}
.main {
float:right;
width: 396px; /* This is due to box-model adding border as width */
border: 1px solid green;
overflow:auto;
clear:right;
}
Here is the FIDDLE on how I would do it: http://jsfiddle.net/mikea80/zJa5P/
<div class="row">
<div class="main">
<p>I'm main!</p>
</div>
<div class="sidebar"><p>I'm a sidebar!</p></div>
</div>
.row {
margin: 0 auto;
width:704px;
clear:both;
}
.main {
display:inline-block;
float:right;
width: 500px;
border: 1px solid green;
}
.sidebar {
display:inline-block;
float: right;
width: 200px;
border: 1px solid red;
}
With the row being 700px this code will center it
You have to add position absolute to sidebar class.
CSS:
.sidebar {
position: absolute;
float: left;
width: 200px;
border: 1px solid red;
}
.main {
position: relative;
left: 220px;
width: 500px;
border: 1px solid green;
}
Trust me, this way, you can add other row class without any problem. Here is the FIDDLE:
http://jsfiddle.net/asubanovsky/bVr6r/