I have a page that should have text on the left and a form on the right. It looks (and renders) properly on most browsers (including Firefox, Chrome, and Safari).
Some versions of IE, however, keep the form in the correct position (top-right), but push the text all the way to the bottom of the page.
Here's the code used to position the form:
.custom #conversion_form {
width: 300px;
border: 1px solid #999;
background-color: #e9e9e9;
padding: 25px 30px 25px 25px;
float: right;
display: block;
margin-left: 20px;
}
What tag(s) to I need to add to keep the text in the top left/avoid having it get pushed down?
Demo: http://rainleader.com/signup
Screenshot (How it Should Look):
I'd create two divs, one for the text other for the form.
I always use the center 50% on the left attribute and use margin-left or marging-right to handle de position of the divs independently of resolutions.
See this example:
Div for the text, put the text within the div:
.div_left_text {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
margin-left:-250px;
top: 15px;
}
Div for the form, put the form within this div:
.div_right_form {
position: absolute;
width: 200px;
height: 200px;
left: 50%;
margin-right:250px;
top: 15px;
}
This should create two areas one in the left another in the right independently.
When you are creating a side by side effect it's always best to float the left content left, float the right content right, and overflow:hidden; both.
If you still see a problem, wrap both of the content in a <div> and overflow:hidden; that.
Related
I was having problems with positioning my language option at the top of my blog. It was always on a different position on a Windows and a Mac. So I thought about making an inner and outer div. But I'm having troubles with the position of my inner div.
This is the result I want:
This is what I have now
This is the code I have in my CSS on wordpress:
EDITED
.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}
.inner {
position: relative;
left: 160px;
top: -336px;
background: transparent;
width: 150px;
z-index: 10001;
}
The block with the border just has <div class="outer"...
And the inner div, the dropdown, is a widget that I'm trying to position at the top of the page, I gave the widget "inner" class.
QUESTION --> If I put marging-right: 4px, it starts counting from the right of the screen, how do I position (for example 4px) from the right of the Outer div?
So that it starts counting from the dotted border on the right (or the left, doesn't matter)
(I'm a beginner in HTML so if you know how to help me, could you please tell me what code I need, and where?
You should use % to refer to positions on the screen. But your problem can be fix using position: relative to refer to the poition inside the parent object, and moving it with top and left
.outer {
margin: auto;
overflow: visible;
background: white;
margin-left: 925px;
margin-top: -8px;
margin-bottom:-30px;
font-size: 11pt;
color: #E1BDC3;
border: 1px dotted #999999;
border-radius:8px;
width: 255px;
height: 48px;
padding-top: 15px;
padding-left: 10px;
z-index: 1000;
}
.inner {
position: relative;
left: 159px;
top: -17px;
background: transparent;
width: 100px;
}
<div class="outer">
OUTER
<div class="inner"><select><option>INNER</option></select></div>
</div>
To answer your question "how do I position (for example 4px) from the right of the Outer div?" you would do that by first determining how the elements relate to each other. This is determined by the position and display CSS properties. Depending on which position and display values your two elements have, the answer will vary.
The HTML markup you provide for your "outer" element shows that it is a div. Your CSS does not define a position for this element, so the browser default is static, i.e. position:static.
Your "inner" element is a mystery to us. If it is another div then it is another static position which we can help with. If it is a ul then it is an inline element, which will require a different answer.
Your markup is important here.
EDIT
First thing, your 'outer' div is not actually containing your inner div. This is the outer div markup:
<div class="hide_on_mobile outer">Choose language</div>
You'll see it doesn't contain the element in question that we want to position. Therefore, like my first sentence states, we need to understand how our element in question relates to those around it.
In your situation, you are not in a good spot because the element you want to position is contained by elements that don't relate to your target element. Therefore the only way to position them in the same spot on all screen sizes is to position them absolutely and use percentages.
Or the easy way, if you want to stick to one screen width:
.inner {
position: relative; //override by .widget_polylang element
left: 27px;
top: -17px; //override by .widget_polylang element
background: transparent;
width: 100px; //override by .widget_polylang element
}
You'll see some of your key/value parameters are being outclassed by the .widget_polylang element. The only way to change those is to edit the styles of .widget_polylang or add increased CSS specificity to .inner.
I currently have two divs that I'm trying to use to emulate a drop down tabbed window.
I have content where the grayed out areas are. The bigger div (the div containing the big gray area or the "window") has a position of absolute, but so does the little div (the tab). I can't figure out how to move the tab so that I can add more tabs. When I do add more tabs, they just sit over the middle tab. I've looked at all the styling in the Elements dev tools, but there aren't other properties that can "shift" the tab left or right. How can I move it over to the left by, say, 200 px?
It is hard to help you without knowing more about your situation and seeing the code. But I made a couple illustrations to try and help you.
Example one.
This is how I would do it without position absolute. This way will keep the content area up top but will stack the tabs from left to right as you add more,
html
<div id="content">
</div>
<div id="tab1" class="tab">
</div>
<div id="tab2" class="tab">
</div>
<div id="tab3" class="tab">
</div>
css
#content {
background-color: gray;
width: 100%;
height: 200px;
}
.tab {
width: 100px;
background-color: gray;
height: 50px;
display: inline-block;
}
Output
This way is using position absolute and here is a jsfiddle.
Once an element has position absolute it can be moved around with directional rules. It starts in the top left corner. To move it now you can add a direction with an amount.
#myElement: {
position: absolute;
top: 20px;
right: 50px;
bottom: 20px;
left: 10px;
}
You can play with these values and watch the element move around the window.
Same html as example 1.
CSS
#content {
background-color: gray;
width: 100%;
height: 200px;
}
.tab {
width: 100px;
background-color: gray;
height: 50px;
display: inline-block;
}
#tab1 {
position: absolute;
left: 8px;
}
#tab2 {
position: absolute;
left: 300px;
}
#tab3 {
position: absolute;
left: 631px;
}
If this does not help you please add your code so I can better understand what you are trying to accomplish. From your question it sounds like you are having trouble using position asbsolute and creating tabs side by side of eachoter under the content. If so I have provided two examples.
1. using position absolute.
2. using display: inline-block.
I have seen people ask questions about how to get two divs to line up side by side. I can get mine to do that just fine.
My problem is that they will not smash up against each other. There always seems to be a gap.
For example, I have a wrapper div with a width of 500px. Inside that div I have two other divs with widths of 250px.
They will not line up next to each other because there is not enough space for each other.
When I set the width to 248px they do line up but with a 4px gap between each other.
I have an example of this code located here:
https://c9.io/riotgear66/day1/workspace/sams/html/index.html
Please feel free to take a look at it and try adjusting it with your browser's element inspector.
The layout problem is the result of applying display: inline-block to the div elements.
Any white space between those div elements are taken into account when laying out the content.
You could remove the white space (linefeed or carriage return) between the div's if you don't mind how your source code looks.
Since your parent container has specific dimensions (500px x 300px), I would use absolute positioning to place the child elements. This would make it easier to position your logo motif over the other images.
You could also use floats as stated in other responses, not any easier or harder.
In this application, the layout is fixed so there are no design considerations for a responsive or flexible design, so either approach is valid.
Demo
You can see how this might work in the following demo: http://jsfiddle.net/audetwebdesign/hZ5dB/
The HTML:
<div class="container">
<div class="panel ul"></div>
<div class="panel ur"></div>
<div class="panel ll"></div>
<div class="panel lr"></div>
<div class="overlay"><span>Cats</span></div>
</div>
and the CSS:
.container {
border: 1px dotted blue;
width: 500px;
height: 300px;
position: relative;
margin: 0 auto;
}
.panel {
width: 250px;
height: 150px;
position: absolute;
}
.ul {
background: red url("http://placekitten.com/400/400") -50px -20px no-repeat;
top: 0; left: 0;
}
.ur {
background: red url("http://placekitten.com/300/300") 0px -30px no-repeat;
top: 0; right: 0;
}
.ll {
background: red url("http://placekitten.com/350/250") -20px -20px no-repeat;
bottom: 0; left: 0;
}
.lr {
background: red url("http://placekitten.com/300/200") 0px -30px no-repeat;
bottom: 0; right: 0;
}
.overlay {
position: absolute;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.overlay span {
display: block;
background-color: gray;
border-radius: 50%;
text-align: center;
vertical-align: middle;
width: 80%;
height: 80%;
margin: 10%;
line-height: 80px;
}
I also show how you can create the circular motif without having to modify the original background images, saves a bit of work with PhotoShop or similar.
You shouldn't be using
display: inline-block;
Make them:
float: left;
Here is a jsfiddle sample of how it should be.
http://jsfiddle.net/Tqdqa/
The problem lies in the white space in your HTML. When using display: inline-block, white space after elements is taken into account like Marc Audet said.
To fix it without changing your current method, you must remove that white space. The easiest way I've found to do so while still maintaining readability of the HTML is by commenting it out, or using <!-- after each element and --> before the next element. This prevents having to change the whole structure and you can make each one 250px again as well
You could also move the closing > to the next line, move everything after the opening <div> to the next line, or use margin-left:-4px; for each element after the first. Or use a method described by others here, floating it or using FlexBox
Here is the CSS Tricks page that references this situation and provides more detail
I'm working on a simple CSS and HTML website, trying stuff out.
I wanted to make an image float over a div. Something like so:
<div id="big_container">
<img id="img1" src="images/fun.png"/>
<div id="some_container"></div>
</div>
Here is the CSS for it:
#big_container{ width: 960px; height: 270px; margin-left: auto; margin-right: auto; margin-top: 42px;}
#some_container{ width: 100%; height: 198px; border: 1px solid #cccccc;}
#img1{ width: 69px; height: 200px; float: left; position: relative; left: 200px;}
What this does, is instead of placing the img over the some_container div, it places it FIRST and after the image, underneath it, it places the some_container div.
How can i get the image to float over the div? Firefox and Chrome display it correctly. IE8 does not.
EDIT
I tried removing relative and left, according to Kyle Sevenoaks. But it still displays it above the div, and does not overlap.
You can use position: absolute; to make it display over the div you require:
#img1{ width: 69px; height: 200px; position: absolute; left: 200px;}
http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/
EDIT
I forgot to mention that with this you should add position: relative; to the parent div.
http://jsfiddle.net/Kyle_Sevenoaks/dLnm7/1/
Floating an element will not place it over the top of other elements within the same parent. You've also tried to use a "left" CSS value on a relatively positioned element. "float" works on relatively positioned elements, "left" works on absolute and fixed positioned elements.
Here is your CSS to position "img1" over the top of "some_container" (includes short hand for margin declarations). Note "position:relative;" applied to the parent "big_container".
#big_container{ width: 960px; height: 270px; margin: 42px auto 0; position:relative;}
#some_container{ width: 100%; height: 198px; border: 1px solid #CCC;}
#img1{ width: 69px; height: 200px; position: absolute; left: 200px; top:0px; }
You will now see that IE8 wasn't at fault here. Other browsers may have been kind to you and ignored any conflicting CSS declarations to give you the desired result. IE8, being less sophisticated, probably wasn't compensating and taking your CSS literally.
I'm trying to create this design for a WP template:
http://minus.com/lbi1iH25EcKsu7
Right now I'm like this: http://www.uncensuredftw.es/plantilla-blueftw/boilerplate/index.html
I think you can get the general idea ;)
I know...it's my fault: The browser calculate the size of the window from left to right, so if I put a margin it will move the div with the 100% size to de right.
But the thing is: I don't know how to make it work :(.
I wanted to make the "black bars" with divs (I painted the ones than don't work in red and orange) and the trick worked...but only the left ones works like I want.
I'm getting out of ideas. I tried like everything I could think off, and nothing works.
Maybe you can help me? ;)
This is the html code:
<div class="barraUL"></div><div class="barraDL"></div>
<div class="presentacionbg"></div>
<div class="presentacion">
<div class="barraUR"></div><div class="barraDR"></div>
And this the css:
.barraUL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: -20px;
}
.barraDL {
position: absolute;
width: 50%;
height: 27px;
background-color: black;
right: 50%;
margin-right: 500px;
margin-top: 309px;
}
/* This next two are the ones than "doesn't work" */
.barraUR {
position: absolute;
width: 50%;
height: 27px;
background-color: red;
left: 50%;
margin-left: 500px;
margin-top: -4px;
}
.barraDR {
position: absolute;
width: 50%;
height: 27px;
background-color: orange;
left: 50%;
margin-left: 500px;
margin-top: 325px;
}
The right divs are expanding to 50% the window width. For a liquid layout where the bars extend to the length of the window and then cut off, you'd usually make an underlaying div (in this case the bars and the black patterned background) and then expand it to 100% of the window. You can't make an additive layout using relative lengths like percent (left div + fixed middle image + right div) with just CSS (especially not with absolute positioning). If you insist on using this, you'll have to overflow: hidden; the html {} or body {} tag after centering your content and that's just bad practice. I recommend just having two long divs go all the way across the screen under your sprite image.