I have two spans I would like next to each other.
<span id = "pic" >
<img src="me.jpg" id = "prof">
</span>
<span id = "info">
Lorem ipsum
</span>
My CSS is:
#pic{
width: 40%;
float:left;
padding-top:6%;
position: fixed;
display: inline-block;
margin-left: 15%;
}
#info{
/*width: 40%;*/
float:right;
/*padding-left: 75%;*/
padding-top:16%;
color: white;
display: inline-block;
}
The second span won't float to the right of the first span even with padding-left, or margin-left to 75% when theoretically I should just need 45% to get it to be 5% to the left of the first span.
When I don't have the first span as position fixed (I'd like the picture to stay as the text scrolls) the second span would pop to the top of the first rather than aside it, or on the bottom starting right next to the bottom where the first line of text aligns to the bottom of the picture.
This should work
#pic{
width: 40%;
left:15%;
padding-top:6%;
position: fixed;
display: inline-block;
}
#info{
/*width: 40%;*/
position:absolute;
right: 0px;
top: 16%;
color: white;
display: inline-block;
}
try it out and let me know if it is what you want
I'd suggest removing position: fixed; since that won't work with the arrangement that it looks like you're trying to achieve. See how it goes.
There's only space for 20% or 20vw, so you can put margin-left/right or padding-left/right together a total of 20% only :
#pic{
width: 40%;
float:left;
padding-top:16%;
display: inline-block;
background-color: pink;
}
#info{
width: 40%;
float:right;
padding-left: 20%;
padding-top:16%;
color: white;
display: inline-block;
background-color: red;
}
<span id = "pic" >
<img src="me.jpg" id = "prof">
</span>
<span id = "info">
Lorem ipsum
</span>
Percentage-based widths will not always work unless they are contained in a parent which has a known width. Try changing the spans to divs and containing them inside another div:
<div id="container">
<div id = "pic" >
<img src="me.jpg" id = "prof">
</div>
<div id="info">
Lorem ipsum
</div>
<br style="clear:both" />
</div>
CSS:
#container{
width: 100%;
}
#pic{
width: 40%;
float: left;
padding-top: 6%;
margin-left: 15%;
}
#info{
width: 45%
float: left;
padding-top: 16%;
color: white;
}
Both sub-divs can float left. The second one stacks to the right of the first. The br tells the browser to clear the floats afterwards so any elements created after this will fall below.
probably late for an answer, however, I'd like to present a technique I came up with to solve such problems that I faced lately...
I had two divs and I wanted to align them beside each others,and I have styled them inline and all these techniques and solutions that I read about here and there, and no matter I do, they display vertically...
The technique I thought of is to put border to the divs and see the space they acquire in the div or whatever they are in...
It turned out that the first div took the whole space horizontally and the other div could not stand beside it... so I reduced the width of the first div and all the solutions there worked out.
So it is not a solution rather that a technique to find a solution... I hope that this will help someone.
Related
EDIT: The problem is solved, so thanks to everyone who helped!
Original post:
So I am trying to put three divs next to each other (until thus far this part has been successful) with the third and last div to like go to attach to the bottom of the divs, which I have no clue how to do this.
How can I put the third div to attach to the bottom of the middle div and stay within the container?
To show you, I made a quick example. Something like this:
The black colour in the image is the 'body'.
The grey is a container div I put the three other divs in.
Each other box represents a div with what I want them to do and how approx. I want them to be positioned of one another.
I hope this can be done only using html and css. I would appreciate any help.
So far I have this as html for the divs:
#nav,
#textarea,
#contactallpages {
vertical-align: top;
display: inline-block;
*display: inline;
}
#containerpage {
position: relative;
margin: auto;
padding-top: 5%;
padding-bottom: 5%;
background-color: black;
height: 100%;
width: 70%;
}
#centercontainer {
background-color: lightblue;
width: 75%;
margin: 0 auto;
padding: 2%;
}
#nav {
float: left;
background: #aaaaaa;
height: 50%;
width: 15%;
padding: 1%;
}
#textarea {
display: inline-block;
background: #cccccc;
height: 70%;
width: 64%;
padding: 1%;
}
#contactallpages {
background: #bbbbbb;
position: absolute;
width: 15%;
padding: 1%;
bottom: 0;
}
<div id="containerpage">
<div id="centercontainer">
<div id="nav">
<ul>1
</ul>
<ul>2
</ul>
<ul>3
</ul>
</div>
<div id="textarea">
<header>
<h1>Welcome</h1>
</header>
<p>
Text text more text.
</p>
<p>
And more text.
</p>
</div>
<div id="contactallpages">
Random small textbox
<br>More small text.
</div>
</div>
</div>
The way you should lay this out is one container div and 3 children div's set to display: inline-block;
Using display: inline-block; will position all the div's next to each other and allows you to use the vertical-align property.
Now all you would need to do is set the proper vertical-alignment for each of the child div's. You can also set the height to the container div (#myPage) and that is the height that vertical-align will use to determine the positioning.
https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align
#myPage div {
display: inline-block;
width: 100px;
}
#centerFold {
height: 200px;
vertical-align: middle;
background-color: yellow;
}
#navBar, #contact{
height: 100px;
}
#navBar {
vertical-align: top;
background-color: red;
}
#contact {
vertical-align: bottom;
background-color: blue;
}
<div id="myPage">
<div id="navBar">
</div>
<div id="centerFold">
</div>
<div id="contact">
</div>
</div>
Try out flexbox if you do not have too much to worry about backward compatibility. My time at the moment doesn't allow to elaborate, but the essential part would be
#centercontainer {display: flex}
#contactallpages {align-self: flex-end}
Be aware though that some prefixing will be necessary for older browsers and this is only the standards-compliant solution. It does everything you want and you can forget about floating. Adding a
#textarea {flex-grow: 1}
would even allow the center to grow not only in height but in width also.
I'm currently creating a website, which has a centered box with text and and such.
Now, i also want a box floating on the right, with a little gap from my main box.
I'll leave a picture here, where the red box i drew is the floating box i want to make.
Btw. the blue box is just a censored box i didn't want on the picture.
So my question for you is, how do i make a floating box like that?
I've tried a couple of times with different methods.
in the CSS, i've made a box and gave it the property float:right;
But when i do that, it just turns out like this
Any help will be greatly appreciated
DEMO
You can keep an element center align by defining its width then using margin: 0 auto; technique. this will make sure your center div is in center then you can use position: absolute to create the other box on offset position.
HTML:
<div class="main-wrapper">
<div class="main">This is in center position.</div>
<div class="side">This is in offset position.</div>
</div>
CSS:
body {
background: #333;
color: #fff;
}
.main-wrapper {
position: relative;
margin: 0 auto;
}
.main, .main-wrapper {
width: 500px;
}
.main {
border: 1px solid #f00;
min-height: 500px;
}
.side {
width: 200px;
border: 1px solid #f00;
min-height: 200px;
position: absolute;
top: 60px;
right: -300px;
}
.main, .side {
text-align: center;
padding: 10px;
}
My best guess is that you have a <div> with a float: right; in the end. Keep it in the first code. So that it gets floated correctly. I would code this way:
<div class="right">Right</div>
<div class="main">
Main Contents
</div>
CSS would be:
.right {float: right; width: 20%;}
.main {margin: auto; width: 60%;}
Preview:
Fiddle: http://jsfiddle.net/praveenscience/8WHyp/
U can have main container display : inline-block
width of each sub container as width : 30%;
and width of the floating box which is inside 3rd sub container as
width : 100%;
In case u dont need first div,
put some margin for the 2nd container
ex .. margin-left : 300px;
and in case u dont want ur floating box width to be 100% of the 3rd container, u can adjust it too
I'm trying to make a menu bar centered horizontally in the header of my page. For some reason, i can't get the centering to work. I made a little test page roughly displaying the problem: JSFiddle. The inner div has to be 5px away from the bottom, that's whatI use the position: absolute for.
I've tried searching on the web alot, but everything I find gives me the same result, or none at all. Most problems I found were when text-align: center wasn't in the container div, but even with it, it still doesn't work.
I removed two css attributes and it work.
position: absolute;
bottom: 5px;
Check this Fiddle
5px from bottom. Fiddle
This is not a perfect way, but it's still kind of useful. I first think of this idea from this Q&A.
You'll have to make some change to your HTML:
<div id="container">
<div id="wrapper-center"> <!-- added a new DIV layer -->
<div id="inner_container">
TEXT ELEMETNES IN THIS THING!!!!
</div>
</div>
</div>
And the CSS will change to:
#container {
background: black;
width: 100%;
height: 160px;
position: relative;
}
#inner_container {
display: inline-block;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
position: relative;
left:-50%;
}
#wrapper-center {
position:absolute;
left:50%;
bottom:5px;
width:auto;
}
Demo fiddle
The trick is to place the wrapper at the given top-bottom position, and 50% from left (related to parent), and then make the true content 50% to left (related to the wrapper), thus making it center.
But the pitfall is, the wrapper will only be half the parent container's width, and thus the content: in case of narrow screen or long content, it will wrap before it "stretch width enough".
If you want to centre something, you typically provide a width and then make the margins either side half of the total space remaining. So if your inner div is 70% of your outer div you set left and right margins to 15% each. Note that margin:auto will do this for you automatically. Your text will still appear to one side though as it is left-aligned. Fix this with text-align: centre.
PS: you really don't need to use position absolute to centre something like this, in fact it just makes things more difficult and less flexible.
* {
margin: 0;
padding: 0;
}
#container {
background: black;
width: 100%;
height: 160px;
}
#inner_container {
color:red;
height:50px;
width: 70%;
margin:auto;
text-align:center;
}
If you don't want a fixed width on the inner div, you could do something like this
#outer {
width: 100%;
text-align: center;
}
#inner {
display: inline-block;
}
That makes the inner div to an inline element, that can be centered with text-align.
working Ex
this CSS changes will work :
#container {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner_container {
display: inline;
margin: 0 auto;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
Try this:
html
<div id="outer"><div id="inner">inner</div></div>
css
#outer {
background: black;
width: 100%;
height: 160px;
line-height: 160px;
text-align: center;
}
#inner{
display: inline;
width: auto;
color: white;
background-color: #808080;
padding: 5px;
bottom: 5px;
}
example jsfiddle
You may set the inline style for the inner div.
HTML:
<div id="container">
<div align="center" id="inner_container" style="text-align: center; position:absolute;color: white;width:100%; bottom:5px;">
<div style="display: inline-block;text-align: center;">TEXT ELEMETNES IN THIS THING!!!!</div>
</div>
</div>
Here is working DEMO
Take a look at this fiddle that I found, and resize the result window: http://jsfiddle.net/qPHgR/286/
Here's the css from the fiddle:
.left {
float: left;
}
.right {
background-color: #DDD;
overflow: hidden;
}
I want to achieve the same thing, but I want the right div to have a fixed width (300px) and the left div to expand/contract when the window is resized. I can not figure out how to fix it without changing the HTML order of left and right div in the code. I've experimentet with floats and other attirbutes but can't make it work.
Thanks for your help!
.container {
position: relative;
}
.left {
background-color: #DDD;
margin-right: 300px;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 300px;
}
How about this:
http://jsfiddle.net/7DKX8/2
.left {
float: left;
background-color: #DDD; }
.right {
width: 300px;
overflow: hidden; }
Updated jsFiddle
The floats are important for keeping the two elements next to each other. I added 310 pixels of margin to the right of the left DIV (300 pixels for the right DIV, and 10 pixels as white space). I then used a negative margin-left to pull the right DIV over on top of that margin.
I also added overflow: hidden; on DIV.container to illustrate a simple float containment solution. This can be removed if unnecessary, but you may find it makes the remainder of your layout styling easier.
Is this sort of what you want? http://jsfiddle.net/3ZUas/
The text interferes, but is this what you were going for?
Main thing is float: right;
Check this:
HTML:
<div class="container">
<div class="left">
some text goes here which is just here to change
</div>
<div class="right">
some longer bunch of text to go here, it should stick to the right some longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the rightsome longer bunch of text to go here, it should stick to the right
</div>
</div>
CSS:
.left {
float: left;
margin-right: 300px;
border: 1px solid #000;
}
.right {
position: absolute;
right: 0;
width: 300px;
background-color: #DDD;
overflow: hidden;
}
Hope this works for you...!
How do i keep two elements in the same row with fixed right column?
I want right div to be with fixed size, and left column fluid, but when in insert long text to left one, then right one goes to the next column..
Example: http://jsfiddle.net/Jbbxk/2/
Is there any pure CSS solutions?
NB! Wrap div must have dynamic width!
For demostration purposes it has fixed witdh, so it will wrap.
Cheers!
This is one common way of doing what you want:
.wrap {
position: relative;
margin: 5px;
border: 1px solid red;
}
.left {
float: left;
background-color: #CCC;
margin-right: 48px;
}
.right {
position: absolute;
top: 0;
right: 0;
width: 48px;
height: 48px;
background-color: #888;
}
Explanation:
The fluid left column fills the whole width but saves space for the right column with margin-right: [right column width];
The fixed right column is placed at an absolute position at top 0, right 0 (its correct place)
The wrap div is assigned position: relative so the right column position is determined according to it.
It's actually easier than I thought, just remove the float:left; from the left class and put your right floating items above them in the HTML
update fiddle
Here is another solution. Set display: table-cell;
http://jsfiddle.net/Jbbxk/54/
.left {
/*display: left;*/
display: table-cell;
}
.right {
float: right;
display: table-cell;
}
Also, the floating div comes first:
<div class="right">
</div>
<div class="left">
Looooooooong content - pushes right to next row<br>
NOT OK
</div>
You can do
.left {
max-width: 152px;
}
as you have dynamics width, use % like
.left {
float: left;
background-color: #CCC;
width:75%;
}
I have updated the fiddle link : http://jsfiddle.net/Jbbxk/6/