I have html code:
<div id="right">right</div>
<table>
<tr><td>row</td></tr>
</table>
with css:
#right
{
position: absolute;
right: 0px;
border: 2px solid #AAAAAA;
padding: 20px;
}
and as a result both table and div start at the top of the page but I want table to start below the div. What can I do about it?
jsFiddle: http://jsfiddle.net/jrkno49u/
You are using absolute positioning so it took the div out of the flow. Hence for table the div doesn't exist.
To achieve what you want : You can set position:relative; for div & move the box accordingly to the right by setting it's left property in css.
You could also do a float instead of absolute positioning, and then clear the float for the table:
#right
{
float:right;
border: 2px solid #ddd;
padding: 20px;
}
table {
clear: right;
}
http://jsfiddle.net/jrkno49u/2/
You need to do nothing more. Just remove position: absolute; right: 0px; from #right
#right
{
border: 2px solid #AAAAAA;
padding: 20px;
}
<div id="right">right</div>
<table>
<tr><td>row</td></tr>
</table>
Check Your updated fiddle.
Related
I would like to layout my website header with an image to the left and some text aligned at the bottom left ...
...or bottom right.
...or even better, have the image DIV height perfectly fit in the parent DIV :
...
Unfortunately I cannot get past this :
I am approaching this in two parts. The first part is to float my two inner elements left with a simple :
float:left;
on both inner DIVs.
Then with the second inner DIV I am playing around with position
position:fixed;
right:0;
However if I also add bottom:0 then I get something like this :
The second DIV has jumped outside of the outer DIV. How do I make it so that the positioning is relative to the parent DIV? I have tried position:inherit/absolute/fixed and nothing seems to work. Do I have to set something on the parent DIV?
Here is my JSFiddle: http://jsfiddle.net/c0gjq2fb/8/
Is there something I am not understanding right? Is there a take home message? I never seem to understand HTML/CSS layouts no matter how hard I try :(
You can use Flexbox
.outer {
border: 5px solid red;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.inner2 {
align-self: flex-end;
border: 5px solid green;
}
img {
border: 5px solid blue;
}
<div class="outer">
<img src="http://www.frontangle.com/resources/FrontAngle_For_Site_PNG24.png">
<div class="inner2">Some text</div>
</div>
The border is messed up cause of the height: 100%; value. If you remove the border, it's fine.
http://jsfiddle.net/j9p78a91/
add
position:relative;
top:220px;
to css class .inner2.
.outer {
border-style: solid;
border-width: 5px;
border-color: red;
width: 100%;
height: 280px
}
.inner1 {
border-style: solid;
border-width: 5px;
border-color: blue;
float:left
}
.inner2 {
border-color: green;
border-style: solid;
border-width: 5px;
float:right;
position:relative;
right:0;
top:220px;
}
<div class="outer">
<div class="inner1">
<img src="http://www.frontangle.com/resources/FrontAngle_For_Site_PNG24.png">
</div>
<div class="inner2">
Some text
</div>
</div>
I need a vertical line on the middle of the page, here above i've got horizontal. What i really want is a vertical line with same style of this horizontal line.
hr.style-six {
border: 0;
height: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
How could that be done?
EDIT:
the below codes work but i cannot add anything until the vertical line ends, from the point it ends i can add stuffs but not before that.
I'm trying to add things on the right and left side of the vertical line.
How could i fix it?
This is example with fixed vertical line, always presented, on the middle of page. None other element will move it up or down.
.vline
{
position:fixed;
top:0;
left:50%;
bottom:0; margin:0;
border:none;
border-right:solid 1px black;
z-index:10;
}
<hr class="vline" />
Update : There is example, based on Your edit. If that's what You need. Two divs floated left and right, with some padding and vertical divider line (hr)
body, html {margin:0;padding:0;}
.dleft, .dright
{
display:inline;
width:calc(50% - 20px); /*50% width minus 2xpadding = 20px*/
padding:10px;
}
.dleft
{
float:left;
background-color:yellow;
}
.dright
{
float:right;
background-color:lightblue;
}
.vline
{
position:fixed;
top:0; bottom:0;
left:50%;
border:none;
border-right:solid 1px black;
z-index:10;
margin:0;
}
<hr class="vline" />
<div class="dleft">
aslkjfklasdjfsadlkf
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>asd;lfkj<br>
</div>
<div class="dright">
aslkdjflsadkjf<br>aslkdjflsadkjf<br>aslkdjflsadkjf<br>
aslkdjflsadkjf<br>aslkdjflsadkjf<br>aslkdjflsadkjf<br>
aslkdjflsadkjf<br>aslkdjflsadkjf<br>aslkdjflsadkjf<br>
</div>
<div style="clear:both;"></div>
Here's a fast example I've made. This is one way of achieving this.
<div class="verticalLine"></div>
.verticalLine {
background-color: #000;
height: 100vh;
margin: 0 auto;
width: 1px;
}
Example 1
Another way is using absolute position like this:
.verticalLine {
background-color: #000;
height: 100%;
left: 50%;
position: absolute;
transform: transitionX(-50%);
top: 0;
width: 1px;
}
Example 2
And third way without the height property
.verticalLine {
background-color: #000;
bottom: 0;
left: 50%;
position: absolute;
transform: transitionX(-50%);
top: 0;
width: 1px;
}
Example 3
Since elements in HTML are rendered from top to bottom, there's no way of adding a vertical line as easily as using a <hr>. One way would be to split up the page in two <div>s and adding a border to one of the two <div>s like this:
.left-col {
width: 50%;
min-height: 200px;
border-right: 1px solid black;
float: left;
box-sizing: border-box;
}
.right-col {
width: 50%;
min-height: 200px;
float: right;
}
<div class='page'>
<div class='left-col'>
Content in the left column
</div>
<div class='right-col'>
Content in the right column
</div>
</div>
You could also use display: inline-block instead of float: right, but it will have some issues with spaces taking up a part of the 100% width (so you can't use 50% + 50% divs without using hacks). CSS-Tricks has some information on inline-block.
Depending on if you need content to the right of the vertical line, you may of course skip the .right-col entirely.
box-sizing: border-box makes the 1px border count as a part of the width, so that we can have 50% + 50% = 100%.
Ok, I know this question has been here at least hundred of times but this positioning is driving me crazy - can someone help me?
I have a portlet page (its basically html) with a table and a div tag. I would like to position them next to each other (table on the left, div on the right). Here are parts of my html:
<div id="page>
<table id="logtable">
...
</table>
<div id="divMessage>
...
</div>
</div>
...and CSS:
#page {
width: 1200px;
margin: 0px auto -1px auto;
padding: 15px;
}
#logtable {
width: 800px;
float: left;
}
#divMessage {
width: 350px;
position:relative;
right:-5px;
top: -20px;
}
I have tried various positions - absolute, fixed, float etc, but I cant seem to get it right... Thanks for any help!
You could use...
float: left;
on your div 'logtable'
I would advise using DIVs to do you alignment of content so wrap the table in a DIV.
I also prefer to use inline-block over float left and gives more predictable results.
so...
<div id="page">
<div id="divTable" class="InsideContent">
<table id="logtable">
Left
</table>
</div>
<div id="divMessage" class="InsideContent">
Right
</div>
</div>
#page {
width: 1200px;
margin: 0px auto -1px auto;
padding: 15px;
}
.InsideContent{
display:inline-block;
}
}
#divTable {
width: 800px;
}
#divMessage {
width: 350px;
}
Code needs tidying up but you get the idea...
JSFiddle http://jsfiddle.net/3N53d/
Use float:left on the element which should be on the left and float:right on the right one. Keep in mind that if the sum of their widths exceeds the available space in the parent element they will be split into two lines anyway.
Here you go , no need of right:-5px;
#divMessage {
width: 350px;
position: relative;
top: -20px;
float: left;
}
I see that you forgot closing the quotes at <div id="page>, this might cause some problems, but basically you have to use:
float: left;
for the last div.
I have created this JSFiddle for you to see if this fits your needs.
You can just use display: inline-* to put them side by side in a row
#logtable {
width: 800px;
display: inline-table;
}
#divMessage {
width: 350px;
display: inline-block;
}
JSFiddle
Just try this.
Fiddle
CSS
#logtable {
width: 500px;
float: left;
background:red;
}
#divMessage {
width: 350px;
position:relative;
float:left;
background:blue;
}
try this:
<table id="logtable">
<tr>
<td>
table area
</td>
</tr>
</table>
<div id="divMessage">
div area
</div>
</div>
#page {
width: 800px;
margin: 0px auto -1px auto;
padding: 15px;
border:red solid 1px;
height:170px;
}
#logtable {
width: 400px;
height:150px;
float: left;
border: blue dashed 1px;
}
#divMessage {
width: 350px;
height:150px;
right:-5px;
top: -20px;
border: green dashed 1px;
float:right;
}
here is a smaple
In simple we can do like this:
table#logtable, div.divMessage{
display:inline-block;
}
Or
table#logtable, div.divMessage{
float:left;
width:50%;
}
I have this HTML
.container_1
{
width: 80%;
border: 5px solid black;
overflow: hidden;
}
.container_2
{
float: left;
border: 5px solid red;
width: 100%;
}
.container_1
{
width: 80%;
border: 5px solid black;
overflow: hidden;
}
.container_2
{
float: left;
border: 5px solid red;
width: 100%;
}
<div class="container_1">
<div class="container_2">
Content 1
</div>
<div class="container_2">
Content 2
</div>
</div>
Fiddle http://jsfiddle.net/uZVnB/3/
The problem is that as you see in fiddle the border of .container_1 overlaps the border to the border of .container_2 , so is any form that show complete the border of both containers
Remove float & width from
.container_2. Write like this:
.container_2
{
border: 5px solid red;
}
Check this http://jsfiddle.net/uZVnB/4/
Change the width of .container_2 from 100% to 98%, and everything will be fine. When you set its width to 100%, naturally, it will expand to the maximum, and the borders will overlap.
Remove float: left and width: 100%, since block element fills the entire width of its container, it works fine.
If you have to use float: left style (although I don't think it is required since you have a width: 100% which makes float not behaving as it is defined), you could use box-sizing: border-box, but it only works for mordern browsers, lower version of IE does not support this property.
You may also use position: absolute; left: 0; right: 0; to absolutely position it, but it also conflicts with float: left style and IE6 does not support it.
You can achieve it by using CSS attribute box-sizing:border-box;
SEE DEMO
CSS:
.container_1 {
width:80%;
border:1em solid;
overflow: hidden;
}
.container_2 {
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:100%;
border:1em solid red;
}
Considering IE in mind, here is my solution.
The border will always be extra than the 100% width.
Here is the solution http://jsfiddle.net/uZVnB/41/
Hope this helps
Somehow I can't figure out what I'm missing...
I try to position a number of absolute divs between two fixed bars (header and footer). Header contains some tabs and footer contains an copyright. I want to use the window's scrollbar and not an overflowed div and I know it should be possible!
Every absolute positioned div should carry an extra margin, so that the bottom of that div does not disappear behind the footer.
It should become something like this:
A snippet of my problem is available here on jsfiddle.
My HTML:
<ul class="cf tabs">
<li>Tab 1</li>
<li>Tab 2</li>
</ul>
<div style="margin-top: 40px; padding-bottom: 30px; position:relative">
<div style="position:absolute;top:300px; height:100px; width: 250px; left:200px; border: 1px solid purple;">aaa</div>
<div style="position:absolute;top:0px; height:100px; width: 100px; left:100px; border: 1px solid purple;">bbb</div>
<div style="position:absolute;top:450px; height:100px; width: 250px; left:400px; border: 1px solid purple;">ccc</div>
</div>
<div class="cf footer">Copyright ©</div>
The stylesheet I'm using:
ul.tabs {
list-style-type: none;
list-style-position: outside;
padding:5px;
margin: 0;
position:fixed;
top:0;
z-index: 999;
background-color: white;
left:0;
right:0;
border-bottom: 1px solid green;
opacity: 0.7;
}
ul.tabs li {
float: left;
margin:1px;
padding: 4px 10px 2px 10px;
border: 1px solid black;
}
div.footer {
position: fixed;
bottom: 0;
left: 0;
right:0;
background-color:#DEDEE9;
border-top: 3px outset #BBBBBB;
padding: 5px;
opacity: 0.6;
}
.cf:before,
.cf:after {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
Do you guys have any hints?
Extra info
As you can see in the attached image the purple border of squared div at bottom right is overlapping the fixed footer. I do not want this. There should be given a bottom margin somewhere, so that every div carries an extra margin so it should match the top of the footer
Here's the solution I've come up with. Wrap the bottommost absolutely positioned div inside with another div, on which put bottom margin equal to footer height and the border. I gave it class .inner.
See my fiddle.
Add bottom padding to the document body equivalent to the height of the footer:
body {
padding-bottom: 31px;
}
(JSFiddle doesn't seem to let you modify styling of the body element, so I can't post a fiddle. It should work, though.)
Instead of using absolute positioning, do something like:
margin - left : 800px
Margin - top: 500px