I am working on a site laid out with divs. I am having trouble with one in particular: the training photo div.
If you go to http://php.wmsgroup.com/eofd6.org/education.html you'll see a photo underneath the left nav that has dropped down. I want it to snap right under that nav box. I have tried several different things with its positioning as well as the main content divs positioning and I can't get it right.
Any help would be appreciated. The link to the style sheet is http://php.wmsgroup.com/eofd6.org/in.css
Thanks!
Float #content right, not left.
In order to get more predictable results, I would create an over-all wrapper, then 2 column wrappers. You're close to this layout now, so it would be a simple fix.
<html>
<head>
<style type="text/css">
#leftColumn {
width: 30%;
margin: 0px;
float: left;
display: inline;
clear: left;
}
#rightColumn{
width: 60%; /* allow 10% for flex/margins */
margin: 0px auto;
float: left;
display: inline;
clear: right;
}
</style>
</head>
<body>
<div id="pageWrapper">
<div id="header"></div>
<div id="leftColumn">
<div id="nav"> </div>
<div id="training_photo"> </div>
</div>
<div id="rightColumn">
<div id="content"> </content>
</div>
</div>
<div id="footer"> </footer>
</body>
Can't you change the markup to include the #training_photo div in the #nav div?
Related
I apologize if this is a debug my code question or already answered and I could not find it, I saw many similar things that I couldn't get to work.
I would like to create a page like:
A B C D
-----
footer
such that when I shrink the browser window, it does not produce
A B
C D
----
footer
A,B,C are all in a div, D is a table because I couldn't control the width with the sharing code I put in there.
In my understanding that if I do:
#container {
margin-right: auto;
width: 900px;
overflow: auto;
}
.A {
float: left;
width: 150px;
}
.B {
float: left;
width: 355px;
}
.C {
float: left;
width: 150px;
}
table.D {
float: left;
}
hr {
clear: left
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="simple.css" />
</head>
<body>
<article>
<h3> Commentary</h3>
<div id="container">
<div class="A">
<img src="images/A.JPG" />
</div>
<div class="B">
comments in B
</div>
<div class="C">
<img src="images/C.JPG" />
</div>
<table class="D" width="150">
<tr>
<td> share </td>
</tr>
</table>
</div>
</article>
<hr> closing statements.
<footer> footer stuff.
</footer>
</body>
</html>
It will work.
One thread I looked at suggested not floating, but if I go to fixed, the elements seemed to stay in the window, regardless of how far I scrolled down. When the browser shrinks, I want scroll bars for the A B C D row to appear.
Sometimes, I boil things down to a simple example like this, and it works, and it is little things like taking the space out of something float: left to float:left, or removing the 'p' tag that I had to separate the container from hr, but then when I change my original code, I still have the problem.
You can use a combination of display: inline-block and white-space: nowrap to make this happen.
HTML:
<section id="wrapper">
<div></div>
<div></div>
<div></div>
<div>
<table></table>
</div>
</section>
CSS:
#wrapper {
white-space: nowrap;
/* Optional overflow-x:hidden */
}
#wrapper div {
display: inline-block;
height: 200px;
width: 200px;
background: #BFFF00;
}
And, of course, here's a JSFiddle.
I have a couple of classes there so let me post them first.
HTML:
<div class="content">
<div class="sidebar">
</div>
<div class="area">
</div>
</div><!-- content closed -->
CSS:
.content {
background-color: #eee;
height: auto;
}
.sidebar {
background-color: #555;
width: 250px;
height: auto;
padding: 10px;
float: right;
}
.area {
background-color: #777;
width: 590px;
height: auto;
padding: 10px;
}
So, you can basically see that every single class have height set on "auto". Thats good cause I want content to follow sidebar and area. And they will have plenty of content inside of them.
Now...
.sidebar is set on float:right; so it doesnt really affect to move the content that stands below. Which is footer in my case.
I am wondering how to make the object thats floating, to move the parts that are below of it, depending on auto set height.
I'm not sure I understand your question, but if you are trying to position footer underneath your content that is floated right, you need to clear the float:
<div class="content">
<div class="sidebar">
</div>
<div class="area">
</div>
<div style="clear:both"></div>
This is the footer
</div><!-- content closed -->
Jsfiddle: http://jsfiddle.net/xmw7M/1/
I am creating a sample website which has three divisions horizontally.
I want the left most div to be 25% width, the middle one to be 50% width, and right to be 25% width so that the divisions fill all the 100% space horizontally.
<html>
<title>
Website Title
</title>
<div id="the whole thing" style="height:100%; width:100%" >
<div id="leftThing" style="position: relative; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="position: relative; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
http://imgur.com/j4cJu
When I execute this code, the divs appear over each other. I want them to appear beside each other!
How can i do this?
I'd refrain from using floats for this sort of thing; I'd rather use inline-block.
Some more points to consider:
Inline styles are bad for maintainability
You shouldn't have spaces in selector names
You missed some important HTML tags, like <head> and <body>
You didn't include a doctype
Here's a better way to format your document:
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="left">Left Side Menu</div>
<div id="middle">Random Content</div>
<div id="right">Right Side Menu</div>
</div>
</body>
</html>
Here's a jsFiddle for good measure.
I know this is a very old question. Just posting this here as I solved this problem using FlexBox. Here is the solution
#container {
height: 100%;
width: 100%;
display: flex;
}
#leftThing {
width: 25%;
background-color: blue;
}
#content {
width: 50%;
background-color: green;
}
#rightThing {
width: 25%;
background-color: yellow;
}
<div id="container">
<div id="leftThing">
Left Side Menu
</div>
<div id="content">
Random Content
</div>
<div id="rightThing">
Right Side Menu
</div>
</div>
Just had to add display:flex to the container! No floats required.
You can use floating elements like so:
<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
<div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
<div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
<div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>
Note the overflow: hidden; on the parent container, this is to make the parent grow to have the same dimensions as the child elements (otherwise it will have a height of 0).
Easiest way
I can see the question is answered , I'm giving this answer for the ones who is having this question in future
It's not good practise to code inline css , and also ID for all inner div's , always try to use class for styling .Using inline css is a very bad practise if you are trying to be a professional web designer.
Here in your question
I have given a wrapper class for the parent div and all the inside div's are child div's in css you can call inner div's using nth-child selector.
I want to point few things here
Do not use inline css ( it is very bad practise )
Try to use classes instead of id's because if you give an id you can use it only once, but if you use a class you can use it many times and also you can style of them using that class so you write less code.
Codepen link for my answer
https://codepen.io/feizel/pen/JELGyB
.wrapper {
width: 100%;
}
.box {
float: left;
height: 100px;
}
.box:nth-child(1) {
width: 25%;
background-color: red;
}
.box:nth-child(2) {
width: 50%;
background-color: green;
}
.box:nth-child(3) {
width: 25%;
background-color: yellow;
}
<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box">
Random Content
</div>
<div class="box">
Right Side Menu
</div>
</div>
You add a
float: left;
to the style of the 3 elements and make sure the parent container has
overflow: hidden; position: relative;
this makes sure the floats take up actual space.
<html>
<head>
<title>Website Title </title>
</head>
<body>
<div id="the-whole-thing" style="position: relative; overflow: hidden;">
<div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
Left Side Menu
</div>
<div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
Random Content
</div>
<div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
Right Side Menu
</div>
</div>
</body>
</html>
Also please note that the width: 100% and height: 100% need to be removed from the container, otherwise the 3rd block will wrap to a 2nd line.
Get rid of the position:relative; and replace it with float:left; and float:right;.
Example in jsfiddle: http://jsfiddle.net/d9fHP/1/
<html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
<div id="leftThing" style="float:left; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="float:left; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="float:right; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
I would like to add a space on the right of my page to place some extra content like tag cloud, ... like below (marked in red):
Here is my actual code:
<div id="menu">
#Html.BuildMenu()
</div>
<div id="content">
<div class="outer-gray">
<div class="inner-gray">
#RenderBody()
</div>
</div>
</div>
PS: my outer-gray and inner-gray are used to have a double-border effect.
I'd be so grateful if someone can point me in the right direction.
Thanks.
I figure the CSS property float is what you're looking for here. Try something like:
#menu { width: 10%; float: left; }
#content { width: 80%; float: left; }
#cloud-tag { width: 10%; float: right; }
I noticed you have:
<div id="This is my content"> when it should be
<div id="content">
if you reduce the width of your #content, it should fix it.
I have this HTML code:
<body>
<div id="div0" style="display:inline; background-color:green; width:100%">
<div id="div1" style="display:inline; background-color:aqua;width:33%"> </div>
<div id="div2" style="display:inline; background-color:red;width:33%"> </div>
<div id="div3" style="display:inline; background-color:yellow;width:33%"> </div>
</div>
</body>
I want to fill the page with div1, div2 and div3 but they don't fill the entire width.
What it's happening?
Taken from display declaration:
display: inline means that the element
is displayed inline, inside the
current block on the same line. Only
when it's between two blocks does the
element form an 'anonymous block',
that however has the smallest possible
width.
You cannot give an inline element set width or height dimensions, they will be ignored. An element must have a display type of block to do that. Setting display: block however will not achieve what you want since each element will fill the entire width. float: left will cause them to stack to the left and also forces display: block.
<head>
<style type="text/css">
#wrap {
width:100%;
}
#wrap:after {
/* Prevent wrapper from shrinking height,
see http://www.positioniseverything.net/easyclearing.html */
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#wrap .container {
float: left;
width:33%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container"> </div>
<div class="container"> </div>
<div class="container"> </div>
</div>
</body>
Mmmmm, semantics
See answer from Phunky for further comments on floating.
Use relative positioning on the outer <div> and float the inner <div>s. Don't use display: inline.
<body>
<div id="div0" style="border: 1px solid red; background-color: green; width: 100%; position: relative;">
<div id="div1" style="background-color: aqua; width: 33.33%; float: left;">a</div>
<div id="div2" style="background-color: red; width: 33.33%; float: left;">b</div>
<div id="div3" style="background-color: yellow; width: 33.33%; float: left;">c</div>
</div>
</body>
display:inline shrink wraps the content. You might want to try float:left instead.
Rory Fitzpatrick more or less has the ideal answer for you, although there is no need to set pos:rel on the #wrapper as it is already a relative block element and will span the full width by default.
When you float a block element it mimics the alignment functionality of display:inline and in an ideal world we would have access to the very useful display:inline-block which would have done exactly what you was expecting it to do.
But one thing you should remember when floating elements is that they will only take up the space they require (this includes margin and padding) unless you set a fixed width.
This is why Rory used width:33%; as that is the best you are ever going to get :)
Ideally this would have been a comment on Rorys post, but i've not got a high enough post count yet.
<body>
<div id="div0" style="float: left; background-color:green; width:100%">
<div id="div1" style="float: left; background-color:aqua;width:33%"> </div>
<div id="div2" style="float: left; background-color:red;width:33%"> </div>
<div id="div3" style="float: left; background-color:yellow;width:33%"> </div>
</div>
</body>
This should work for you. And the reason IIRC is that display: inline does not take % width.
Instead of using float you could use flexbox for a more responsive resizing. Also this forces the elements to remain in a row.
Example:
<head>
<style type="text/css">
#wrap {
width:100%;
display:inline-flex;
}
#wrap:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
display: inline-flex;
flex-direction: row;
}
.container1 {
width:20%;
}
.container2{
width:80%;
}
</style>
</head>
<body>
<div id="wrap">
<div class="container1"> </div>
<div class="container2"> </div>
</div>
The best way to accomplish this, contrary to all the answers given before, can be found referencing the answer to this question:
3 inline-block divs with exactly 33% width not fitting in parent
The quickest and easiest way is not the prettiest to look at (putting your div's on the same line to remove the automatic single white space provided normally), but will work tremendously for what you want. The answer I am referencing list plenty of other way that, in my opinion, are better than any provided before, and address the true problem you are having.
Here is the code working exactly how you'd like, and a link to the fiddle!
<body>
<div id="div0" style="float: left; background-color:green; width: 100%;">
<div id="div1" style="margin: 0px; display: inline-block; background-color:aqua;width:33.33%"> </div><div id="div2" style="margin: 0px; display: inline-block; background-color:red;width:33.33%"> </div><div id="div3" style="margin: 0px; display: inline-block; background-color:yellow;width:33.33%"> </div>
</div>
https://jsfiddle.net/stopitdan/uz1zLvhx/