These are the three parts of my box.
<div id="holder">
<div id="top_content"></div>
<div id="pageContent"></div>
<div id="bot_content"></div>
</div>
They work on the page and look fine until I try to add content. The content is added via a JS menu. When the content is loaded the top box splits away from the bottom two.
Here is my css
#pageContent{
width:900px;
height:inherit;
background-color:#FFFFFF;
}
#top_content {
background-image:url(../img/top_bg.png);
width:900px;
height:15px;
margin-top:20px;
}
#bot_content {
background-image:url(../img/bottom_cont.png);
width:900px;
height:15px;
}
Any one have any idea's?
Related
I'm working on a layout that floats several boxes across multiple rows, and I'm wondering how I can do this in a way that allows each box to float to the top unless there is something above it pushing it down.
At the moment, if the box at the top right is taller than the one on the top left, then both boxes below are pushed down, rather than just the one below the taller box. This results in a strange-looking gap between the top and bottom left boxes.
The boxes will also possibly have varying widths.
Here is a link to a JSFiddle, and for context, below is the actual webpage I'll be applying this layout to.
Fiddle: https://jsfiddle.net/t0tmzk0q/3/
Webpage: http://www.lucieaverillphotography.co.uk/work-3/
<div class="row">
<div class="module" id="one"></div>
<div class="module" id="two"></div>
<div class="module" id="three"></div>
<div class="module" id="four"></div>
</div>
html,
body {
height:100%;
background:pink;
}
.row {
position:relative;
width:85%;
height:100%;
margin: 0 auto;
}
.module {
width:47.5%;
display:inline-block;
float:left;
height:200px;
margin-bottom:35px;
background:lightblue;
}
#one.module {
margin-right:5%;
}
#two.module {
height:300px;
}
#three.module {
width:40%;
margin-right:5%;
}
#four.module {
width:55%;
}
I am using this code for a site I am developing. The problem I am having is scrolling up to the fixed panel div.
HTML:
<div id="wrapper">
<div id="a" class="panels">FIXED PANEL</div>
<div id="b" class="panels">Scrolling-Panel 1</div>
<div id="c" class="panels">Scrolling-Panel 2</div>
<div id="d" class="panels">Scrolling-Panel 3</div>
</div>
CSS:
html,body {
padding:0;
margin:0;
background:black;
}
#wrapper {
position:absolute;
height:100%;
width:100%;
}
.panels {
position:relative;
height:100%;
min-height:100%;
width:100%;
}
#a{
background:#eee;
position:fixed;
color:red;
top:0;
}
#b{
margin-top:100%;
background:yellow;
}
#c{
background:pink;
}
#d{
background:green;
}
Fiddle is here:
http://jsfiddle.net/ygw6b9ga/
Any ideas/help would be much appreciated!!
Clicking link anchor targeting different element in page tells browser to scroll viewport or corresponding wrapper so elements upper left corner (in LTR page) is visible. Fixed elements does not affect scrolling areas so targeting and focussing them does not initiate this routine.
In your example you could either target the #wrapper instead of the #a to re-reveal fixed header (…, fiddle) or resort to javascript (… fiddle).
I've got a set of side by side divs (actually using HTML5 sections but I'm assuming the solution and behavior is just the same). They sit in a container with the right side holding form fields and left side a summary title and information. The structure looks something like this:
<div id="container">
<div id="left" >Summary here</div>
<div id="right">Form fields here</div>
</div>
The catch is I have to hide or show various fields depending on actions taken with javascript so the actual height of the right side and container are not static. What I need is to get the left side to fill the height of the container so it will match the right. I've tried the numerous solutions on the internet but none seem to be working.
Thanks in advance!
This is a very common question. Take a look at this article... it has all the answers:
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Now, here's a quick fiddle of putting that to use. Try clicking on any of the "Column #" text elements to remove them from the document... the columns will resize nicely :)
http://jsfiddle.net/UnsungHero97/qUT3d/9/
HTML
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
CSS
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}
I already have seen a couple of questions going in this direction, but nothing helped. Everyone says just set the parent div position to relative and the child ones to absolute. But my problem is that every div is at the 0/0 point of my parent div. It seems the inner elements doesn't know from each other.
Here is what my page should look like:
http://imageshack.us/photo/my-images/854/unbenanntgoc.png/
In my html I just define my divs:
<div id="content">
<div id="header" />
<div id="naviContent" />
<div id="imageContent" />
<div id="tagContent" />
<div id="textContent" />
</div>
So navi image and tag content divs should float.
And this is how my css looks like:
#charset "utf-8";
body {
background-color:#33FF00;
}
#header {
height:100px;
background-color:#FFFFFF;
position:relative;
}
#naviContent {
width:25%;
background-color:#F0F;
float:left;
}
#imageContent {
background-color:#000;
position:absolute;
float:left;
width:800px;
height:600px;
}
#tagContent {
background-color:#900;
position:absolute;
float:left;
width: 25%;
}
#textContent {
background-color:#0000FF;
clear:both;
}
#content {
height:1600px;
width:1200px;
background-color:#999999;
margin-left: auto;
margin-right: auto;
padding:10px;
position:relative;
}
So maybe anyone can tell me why all my elements (black, yellow, red, grey and green) are positioned to the 0/0 point of the pink one?
Thanks in advance
You need to close the DIV properly -
<div id="content">
<div id="header">Header </div>
<div id="naviContent">Nav</div>
<div id="imageContent">Image</div>
<div id="tagContent"> Tags</div>
<div id="textContent">Text </div>
</div>
EDIT: Working Fiddle You need to adjust floated width and you are done!
Position absolute is not the standard way of laying out a page.
What you should do is just remove the position attribute, float everything left and set widths (please note you will need content in the div for it to render correctly).
You might want to look into CSS grid systems such as 960.gs as they handle this part of development for you in a standardised way using pre-defined classes.
you should code like this : - http://tinkerbin.com/J9CCZXRL
CSS
#content {
background:pink;
width:500px;
padding:10px;
-moz-box-sizing:border-box;
overflow:hidden;
}
#header {
background:red;
height:100px;
}
#left {
background:green;
width:100px;
height:400px;
float:left;
}
#middle {
background:blue;
width:260px;
float:left;
height:400px;
margin-left:10px;
}
#right {
background:yellow;
width:100px;
float:right;
height:400px;
}
#footer {
background:grey;
height:100px;
clear:both;
}
HTML
<div id="content">
<div id="header"></div>
<div id="left"></div>
<div id="middle"></div>
<div id="right"></div>
<div id="footer"></div>
</div>
I'm very new to CSS and have been sitting here for hours trying to figure out why my middle section is not displaying as a column. I've searched the net with apparently no success. I have tried repositioning the divs, clearing everything and floating the bejesus out of everything. It must be something simple, but I don't know what. Could anyone help?
I apologize for the large amount of code if that isn't appropriate, but I don't yet have anything uploaded.
Thanks in advance
HTML
<head><style type="text/css" media="all">#import "css/master.css";</style></head>
<body>
<div id="page-container">
<!-- RIGHT HAND PAGE -->
<div id="navbar">NavBar</div>
<div id="mediaplayer">Meda Player</div>
<div id="sightings">Sightings</div>
<div id="blogheader">Blog Header</div>
<div id="sociallinks">Social Links</div>
<!-- LEFT HAND PAGE -->
<div id="logo">Logo</div>
<div id="mainpic">MainPic</div>
<!-- CENTRE PAGE -->
<div id="headline">Headline</div>
<div id="newsitems">News Items</div>
<!-- FOOTER -->
<div id="footer">Footer</div>
</div>
</body>
</html>
CSS
#page-container {
width:960px;
margin:auto;
background:red;
}
html, body {
margin:0;
padding:0;
}
#logo {
background:purple;
height:150px;
width:270px;
margin-right:450px;
}
#mainpic {
background:darkgrey;
width:270px;
height:450px;
}
#navbar {
float:right;
background:lightblue;
height:50px;
width:690px;
}
#headline {
background:grey;
height:200px;
margin-left:270px;
margin-right:350px;
}
/* News Items Mock - height:350px */
#newsitems {
background:blue;
margin-left:270px;
margin-right:350px;
}
#mediaplayer {
clear:both;
float:right;
background:black;
height:200px;
width:350px;
}
/* Sightings Mock - height:150px; */
#sightings {
clear:both;
float:right;
background:green;
width:350px;
}
#blogheader {
clear:both;
float:right;
background:darkgreen;
height:40px;
width:350px;
}
#sociallinks {
clear:both;
float:right;
background:orange;
height:40px;
width:350px;
}
#footer {
background:yellow;
clear:both;
height:30px;
}
The problem i see is that you're trying to stack a series of divs one in top of the other without any containers to create a three-column page design, while that might be done with css it would be simpler to create a series of containers for each column that you can use to stack your divs under. Take this for example:
If you created a series of column divs you can easily stack all of your page sections inside of its own column, this way you can easily stack as many sections as you want in your page without having to comeback to your css and positioning it the way you're doing it now.
<div class="column">
<section>
<section>
</div>
<div class="column">
<section>
<section>
</div>
<div class="column">
<section>
<section>
</div>
Once you have your columns declared in your markup, you can then float them so they stack next to each other and then you can use a clearfix so they won't go under one another, like so:
.column:before, .column:after {
content:"";
display:table;
}
.column:after {
clear:both;
}
.column {
zoom:1; /* ie hasLayout fix */
float:left;
}
Here is a demo of your code with the columns implemented with the results i think you're looking for: http://jsfiddle.net/wSejZ/1/show/, you can edit the fiddle here: http://jsfiddle.net/wSejZ/1/.
Notice how the sections are stacked inside of a column, this way you can stack as many sections as you want and they will be stacked appropriately inside their container.