This is my admin panel and I want to divide it into 2 columns with divs. The left div is a menu and has this style set:
#menu_left{
position: fixed;
float: left;
width: 300px;
height: 100%;
top: 0;
left: 0;
background: #666;
color: white;
}
The right one is the content and has this style:
#content{
text-wrap: unrestricted;
float:left;
width: 100%;
left: 300px;
}
It doesn't work as it should work, I want it to wrap the text, but it doesn't.
Tell me also please, if there is any faulty style setting.
Oh the html:
<body>
<div id="menu_left">
<h1>Menu</h1> <hr />
</div>
<div id="content"></div>
</body>
You have width 100% on content, which makes it stick out 300px to the right of the window, because of the width of #menu_left. You should make this some pixel value, or change #menu_left to a % width, say 20%, then content could be 80% and they would fit nicely.
Plus you should remove left: 300px; from #content, it will already go where you want it to because of the float: left;.
Just clear out these lines and you should be good to go.
#menu_left{
position: fixed; <--don't need
float: left;
width: 300px;
height: 100%;
top: 0; <--don't need
left: 0; <--don't need
background: #666;
color: white;
}
#content{
text-wrap: unrestricted; <--don't need (you really want to break letters in the same word?)
float:left;
width: 100%;
left: 300px; <--don't need
}
Using a pre-made system makes a lot more sense than trying to start from scratch. I would recommend using a css system like grid960 http://960.gs/
Related
I'm trying to stitch together an image that is divided into several smaller images. I thought if I just floated everything left, they would fall together nicely so long as I declared the divs in the correct order. The full image is 999 pixels wide and 471 pixels tall, so my first attempt was this CSS:
#ImageWrapper{
background-color: #efefef;
width: 999px;
height: 471px;
float:left;
}
#div1{
background-color: #777;
width: 258px;
height: 100px;
float:left;
}
#div2{
background-color: #999;
width: 678px;
height: 37px;
float: left;
}
#div3{
background-color: #bbb;
width: 63px;
height: 471px;
float: left;
}
#div4{
background-color: #ddd;
width: 18px;
height: 18px;
float: left;
}
<div id="ImageWrapper">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
</div>
And then I just declare the divs within the wrapper div in that order, and hoped it would end up looking like this: https://imgur.com/a/d92ig. Divs 1-3 work, but div 4 does not. I tried messing around with the position attribute, but that didn't help either. Is there any way I can easily solve this, and have it work out like in my picture? Eventually I will have enough divs to fill the whole wrapper div, I just wanted to test as I went along.
Here is one way to do it:
#div4{
width: 18px;
height: 18px;
float: right;
background-color:#b2f7;
position:absolute;
margin-top:37px;
margin-left:258px;
}
so simply change position:absolute and then using height and width of div 1 and div 2 you can move to a position.
JSFiddle is here
You could add position: relative to #ImageWrapper and then add the following to #div4:
position:absolute;
left: 258px;
top: 37px;
Bear in mind this isn't responsive at all.
When I try to use the top word in CSS on a link it does not work.
I want my links to be lower on the page so I would use top: 10%;. That does not work though because my links seem to not move no matter what. I can however get them to move sideways with text-align:center;.
My HTML
<div id="pythonfilelistfiles">
<a href="http://localhost/project1/pythonfiles-calcuator.html">
<div class="pythonfilelistboxs" id="file1">
<h1> Simple Calculator </h1>
</div>
</a>
My CSS
#pythonfilelistfiles {
width: 78%;
height: 92%;
margin-left: 20%;
margin-top: -2%;
max-width: 78%;
max-height: 92%;
overflow-y: scroll;
}
#file1 {
top: 0%;
}
.pythonfilelistboxs {
width: 96%;
height: 12%;
background-color: black;
margin-left: 2%;
z-index: 5;
position: relative;
border-radius: 8px;
border: 2px solid red;
color: red;
text-align: center;
line-height: 80%;
}
There are a number of ways you could accomplish this, most of which are probably a little more maintainable than using positioning properties -
Add padding to the top of the containing div.
Increase the line-height for those links.
Use margin-top to move it down a relative amount (you'll need to set it to display: block as well, which will change how they behave in the page flow).
It is probably easier to use a unit other than percentages in any case - it would better practice to use a type-related unit like em or rem.
Most of my code in a jsFiddle:
http://jsfiddle.net/MilkyTech/suxWt/
The content should load on the first page in a white box, with overflowing content pushing the following sections of the page down. However, as can be seen the lower sections load over the top of the first page white box. I have tried changing the positioning/clears of the various sections but cannot seem to create the necessary movement.
<section class="page1">
<div class="huge-title centered">
<div id='detailsbox'>
<h1 id='eorvtitle'></h1>
<img id='eorvimage' src=''>
<div><p>lots of text lots of text
</div>
</div>
</section>
<section class="page2" id='page2'>
</section>
.page1 {
background: url('../img/bg.jpg')#131313;
background-size: cover;
height: 100%;
position: relative;
}
.huge-title {
position: absolute;
top: -20%;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100%;
height: 180px;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align:center;
position: absolute;
float: left;
clear: both;
}
Absolute Positioning does not push containers down. It places itself above or below them based on the z-indexing. You need to enclose your absolute contents inside a relative container to push other containers downwards similar to those in jquery sliders.
you need to change .huge-title and #detailsbox to position:relative;
you can probably get rid of background-size: cover;
also change .huge-title and #detailsbox to the following:
.page1 {
background: url('../img/bg.jpg')#131313;
height: 100%;
position: relative;
}
.huge-title {
position: relative;
top: 20%;
right: 0;
left: 0;
margin: auto;
height: 100%;
}
#detailsbox {
top: -4em;
width: 75%;
left: 12.5%;
right: 12.5%;
border: 20px solid white;
border-radius: 10px;
background-color: white;
text-align: center;
position: relative;
float: left;
clear: both;
}
The proper function of an absolute position is to overlap content. If you want other content to automatically push down then use relative position.
The solution is to create an empty spacer div with float right or left. This would ensure there is space between the two.
Refer this answer
Absolute positioned elements are removed from the main flow of the HTML. That's why it's not pushing the elements below it down. It's now sitting on top of the elements before and after it rather than in between them.
You may want to check this out.
Whether or not absolute positioning makes sense in your case is hard to say without seeing the design you are trying to implement. Using default (aka "static") or perhaps relative positioning will push the other content down below the white box, but without a deign to look at it's hard to tell if that's the real solution.
You can add another empty section between page1 and page2 and give the css below
height: 100%;
Adding an empty div the size of the absolute entity between the absolute entity and other components may help.
SO,
I've created a four-column fluid-width layout for a site, and I'm working on placing a fluid square DIV within one of my columns. There are a few techniques I've found to achieve this - namely, setting padding-bottom to the same percentage as the width - but none of these seem to work when the DIV contains content.
Is there a way to maintain a 1:1 (square) ratio on a fluid DIV when that DIV contains content?
Here's my HTML:
<div id="leftmostcolumn">
<div id="logo"></div>
</div>
<div id="leftcolumn"></div>
<div id="rightcolumn"></div>
<div id="rightmostcolumn"></div>
And my CSS:
body {
width: 100%;
height: 100%;
background-color: red;
}
#leftmostcolumn {
position: absolute;
top: 0;
left: 0;
width: 25%;
height: 100%;
background-color: blue;
}
#leftcolumn {
position: absolute;
top: 0;
left: 25%;
width: 25%;
height: 100%;
background-color: green;
}
#rightcolumn {
position: absolute;
top: 0;
left: 50%;
width: 25%;
height: 100%;
background-color: yellow;
}
#rightmostcolumn {
position: absolute;
top: 0;
left: 75%;
width: 25%;
height: 100%;
background-color: gray;
}
#logo {
width:100%;
padding-bottom:100%;
background-color: #aa2d2d;
color: white;
}
And here's a JsFiddle.
The DIV "logo" is the one I'm trying to maintain as a square. Right now, I've used the padding-bottom approach but that doesn't do the trick when there's content in the DIV. Any input is greatly appreciated!
Marca
EDIT:
Getting there...I'm adapting a script I found to find the width of the DIV and then apply that value to the height to keep it a square. However, as it stands now the script doesn't constantly resize the DIV, and it won't allow it to shrink below a certain size. Any thoughts on how to correct either of these issues?
HTML:
<div id="box"></div>
CSS:
#box { width: 75%; height: 50px; background-color: black; }
JQUERY:
$("#box").css("height", function() {
return $(this).width();
});
JsFiddle is here.
This is something I've actually been messing around with for a while, and have come up with a quasi (but not entirely) hacky, CSS-only solution that seems to work on most browsers in the past decade. The trick is to use images, and positioning in a tricky fashion. Consider the following (simplification) of your code.
Markup:
<div class="sqr_box">
your content goes here!
</div>
CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
border: solid 2px pink;
background-color: grey;
color: white;
}
Now, we can't set the height in terms of percent, so we won't; instead, first we'll go into Photoshop, and make an image that is 2x2 px, transparent, or background-colored. Next we'll add the following to your markup:
<div class="sqr_box">
<img src="images/sizers/2x2.png" class="sizer">
<div class="content">your content goes here!</div>
</div>
and THIS to your CSS:
.sqr_box
{
width: 50%; /* or 100px, or 20em, or whatever you want */
position: relative; /* static positioning is less than ideal for this scenario */
}
.sqr_box > img.sizer
{
display: block; /* images default to an inline-block like thing */
width: 100%;
height: auto; /* CLUTCH!!! this ensures that the image's height changes to maintain proportions with it's width */
visibility: hidden;
}
.sqr_box > .content
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; /* Our parent element now has a dynamically assigned height, this will work */
border: solid 2px pink;
background-color: grey;
color: white;
}
Best of all, this will work for any sized ratio of box you'd want! Just change the proportions of the image!
Hope this is all still relevant to you, 3 months later.
-Sandy
Put all four columns in one div. set that div to 100% width and set the font size to 100em
Have each of your four columns have a width of 25em instead of 25%
Have your logo width and height set to 25em each
I want to create a html page with a header of fixed height, a middle part with variable height and a footer with fixed height. The footer and the header shall not move when scrolling.
No problem so far.
But i want the midlle part to be divided, so that the right column and the left column have seperate scrollbars and scroll independently. This is possible with overflow:scroll as long as the parts have fixed heights. But i want them zu grow and shrink with the window.
I do not linke frames and i want to alter the contents of the 2 columns frequently using javascript (ajax).
What is the best way to create such a page?
I've tested this in IE7/8 (not 6!) and recent versions of: Firefox, Chrome, Opera.
Live Demo (complete with boring colours)
The HTML is very simple:
<div id="header">header</div>
<div id="middle">
<div id="left">left</div>
<div id="right">right</div>
</div>
<div id="footer">footer</div>
On the other hand, the CSS is a bit more complicated:
html, body {
margin: 0; padding:0; border: 0;
overflow: hidden
}
#header, #middle, #footer {
position: absolute;
width: 100%
}
#header {
background: #777;
height: 150px;
top: 0
}
#middle {
background: #f00;
top: 150px;
bottom: 150px
}
#footer {
background: #777;
height: 150px;
bottom: 0
}
#left, #right {
overflow-y: scroll
}
#left {
background: #aaa;
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%
}
#right {
background: #999;
position: absolute;
left: 50%;
top: 0;
float: right;
width: 50%;
height: 100%
}
I will explain how the CSS works if you ask me to.
Try using percentages on divs (and leave out the table). For example, you might set a header at height: 20%, and two middle scrolling divs at height: 70%; width: 50%; float:left;. This leaves the footer div at height: 10%. Changing the contents of the middle divs via ajax shouldn't change their height. But of course, this provides a variable, not fixed, header and footer.
note: these numbers are just for illustrative purposes. You'll need to adjust them, including padding/margins, which are not accounted for.