Consider this JSFiddle: http://jsfiddle.net/GFsgq/5/ (you may have to zoom out a bit).
It shows a layout that I'm trying to achieve. So far it's been going alright, but I've hit a roadblock. I want to position two divs 77px in height side by side of the centered divs. They need to retain width to always touch the edge of the screen and their center div. I'm not sure how to do this with my limited knowledge of CSS, short of adding properties at random.
Her is a picture to help you understand: http://i49.tinypic.com/2ntz34n.png
The blue strips are where I want the divs to be. How do I achieve this?
You need to add this in your CSS:
header:after {
content: "";
display: block;
background-color: blue;
width: 100%;
height: 80px;
}
jsFiddle: http://jsfiddle.net/GFsgq/32/
fullsrcreen result: http://jsfiddle.net/GFsgq/32/embedded/result/
i would add parent div spanning thw dith of the screen with position:relative; and to the two child divs use position:absolute; and position one right:0px; and the other left:0px; I am unsure about how you want to distribute width, if you have any other problems then come back.
Related
I was searching around for a way to vertically center a div in a container. I found a few different ways, but all of them seemed to be very "hacky".
My question is, why is there not just a css property, such as align-vertical that can simply be set to center to center the content? It seems like adding this to css would make so many things much easier.
I am assuming there must be a reason why something like this is not implemented, and I would like to hear if anyone has any idea why.
It's because how browsers traditionally work.
In a browser, by default, the content scrolls vertically. The viewport width is well defined (width of the device), but the viewport height can be one or two times the height of the device, or can even be infinite (as in infinite scrolling).
Traditionally blocks were meant to be horizontally oriented. You place a div and it's automatically occupying 100% of the width of the parent. But its height value is contrained to its content.
If you do
.mydiv {
background: red;
width: 100%;
height: 100%
}
Nothing changes, since divs have already 100% of width, and it can't calculate the height, since it doesn't know how far the viewport will go. You need to add:
html, body {
height: 100%;
}
to tell the browser to use the device height as the 100% value.
That's why horizontal center is easy: you know what the boundaries are, and how to center the element. But vertical center is more complicated, that's why (before flexbox), you need to resort to absolute positioning or hacks.
Flexbox allows you to render content horizontally or vertically, so it's prepared to handle centering along two axes.
If you want to read more about this, I suggest the spec:
Visual formatting model
Visual formatting model details
#outerDiv{
display:flex;
width:100%;
height:200px;
background:#ccc;
align-items:center;
}
#innerDiv {
background:#aaa;
width:80%;
margin:0 auto;
}
<div id="outerDiv"><div id="innerDiv">Hello</h1></div>
Run the script and the div remain in the center.
You can mix and match the combination like this.
Earlier you need to play with the height of the parent container and self height.
But with flex it becomes easy.
If I'm trying to center an element I do the following -
*parent-item {
margin: 0 auto;
width: 100%;
display: block;
It's important to define the width of the element you are centering.
I have a "Contact" section on my website, and I have a form section and a contact info section as two separate divs. The form acts just fine, but for some reason I can't get the contact info section to simultaneously stay on the right side while becoming less wide. I have an image so you can understand what the issue is: http://i.imgur.com/smjnXw1.png
I want them to be aligned horizontally next to each other. Thank you!
Assuming your form is correct since I can't see your code, you can edit the css.
#form{
width: 500px; /*fill in the width and height*/
height: 500px;
float: left;
}
#contact{
width: 500px; /*fill in the width and height*/
height: 500px;
float: left;
}
by default divs are as wide as they can be unless specified and a block element, so your #form is taking up the entire width space. Here is an example fiddle of what I think you're trying to achieve.
http://jsfiddle.net/valleydigital/j3qpeaym/
I think the solution is to apply a float:left to both your form and your contact info section. This way both of these will sit next to each other horizontally. Floats have normally been used to allow text to flow around an image, but sometimes they can be used to position items as well.
Check this out for some information and there are more informative links at the end of the floats post:
http://codemecrazy.wordpress.com/
Increase the size of the div in which u place the form div and contact div. Also give style with float left property.
<style>
#form #contact
{
float:left;
}
</style>
i am learning CSS, i am trying to place the div with red background just below the body, i can't seem to make it fit to the body, whenever i adjust the width it doesn't align with the body,when i tried to place it center and 100% width, it occupies 100% of the width of the page it does not align with the white background area, whenever i do 80% it does align left and does not align with the white background area. Please point me to the right direction. I'm stuck :(
the code i have so far is here: http://pastebin.com/VPMgbzQ2
Thanks in advance.
Make your footer div out of the tabs div and no need of position: absolute on it. Make following changes:
#footer
{
margin-top:80%;
height: 20px;
width:50%;
text-align:center;
background:#C00;
}
Here is fiddle.
Also it seems that you are trying to make responsive design but let me tell you that the way you are proceeding is not the right one for it. You may read Responsive Design By Ethan Marcotte for learning it.
EDIT
Make following changes:
Give height: 400px; or as required to table div.
Make your footer div out of the table div.
Either remove margin-top or change it to 5% or 10% as required in footer div.
Add min-height: 100%; to .tabs.
Check out the fiddle.
Try hardcoding the height value
#spaceheader {
width: 100%;
height: 100px;
background: #000000;
}
I see your issue now. The parent element <div class="tab"> is what's causing your issues. If I were you, I'd take the radio buttons out of the tab, make it not have a float:left on it, and this will probably fix things. You then need to remove the absolute positioning on your footer div.
Also, it looked like you put the footer div inside of the tab, when in actuality, it should be outside of all of the tabs, beneath them in the code.
I have a problem with setting the appropriate text to the slider. I want the text to appear on the bottom right of the page. Only problem is the different resolutions (tablet, laptop, 24'' monitor).
Testing page: http://tinyurl.com/d825kuv
code:
div {
position:relative;
float:right;
vertical-align: bottom;
}
to move an element to the bottom of a <div>, set the parent <div>'s position to relative: position:relative, then the <div> you want to be placed at the bottom should have CSS
div {
position: absolute;
bottom: 0;
right:0;
}
then just adjust the pixel values to suit your layout.
Do:
position:absolute;
right:0px;
bottom:0px;
This will make sure that the element in question will be as far right, and as far down within the parent as possible. Of course if you wanted to pad it from the right/bottom just take the pixels up a notch. Note that position:absolute only works if the parent's position is not set as default. If in doubt give your parent the following style:
position:relative;
I am not sure what to do on this one, I'm not a programmer, but trying to learn CSS as this is how the theme I am using was coded in.
I've gotten quite far on my own, but this one stumps me Its two column Theme... As far as I have been able to get, I can use the following:
#left {
width: 235px;
padding: 10px;
margin-left: 20px;
position: fixed;
line-height: 15px;
If I change the position to Absolute, The whole page scrolls, If I leave it at Fixed, and add lets say, a Twitter feed, or other type of text that takes me past its reading where you would normally scroll, Its just cut off, cannot get to it, hightlight or scroll..
I've also toyed with the idea, of changing the theme to a 3 column theme, but Again, not a programmer, and i'd be really confused. any help would be great...
My Website is at 99lessoxygen.tumblr.com, code was found from http://nigredotheme.tumblr.com
I should note, that If its on Fixed, only the right side of page can be scrolled, and left side is locked..
I believe what your looking for is overflow:auto;
You will need to remove position:fixed.
#box1 {
height:100px;
width:200px;
float:left;
overflow:auto;
}
#box2 {
height:100px;
width:200px;
float:left;
overflow:auto;
}
JSFiddle
A position of absolute will inherit an absolute position from the relative parent div.
So for instance if you have a div set to 1000 pixels and a position of relative
and then insert another div inside of that div with a position of absolute and lets say right:100px it will display on the right side of the parent div 100 pixels out from the right.
try giving both columns a height and adding this:
overflow:auto;
This makes scrollbars appear on its container if the content overflows.