I have two div containers which are structured as follows:
<div class="outer-div">
<img src="images/point.png" class="img-a1">
Lots of text goes here.
</div>
<div class="outer-div">
<img src="images/point.png" class="img-b1">
Some more text goes here
</div>
The styles associated with this are as follows:
.outer-div {
position: absolute;
top: 0px;
left: 0px;
width: 500px;
}
.img-a1 {
float:left;
z-index:-1;
position:relative;
margin-left: 250px;
margin-bottom: 400px;
}
.img-b1 {
float:right;
z-index:-1;
position:relative;
margin-left: 250px;
margin-bottom: 400px;
}
The result of this is to produce something like the following, where ||| is the text from div-a and ... is the text from div-b:
.....|||||
.....|||||
.....|||||
.....|||||
However, since the second div is placed immediately above the first div, none of the text in the second div can be selected, although it can be seen since there is just empty space, and a 1x1 px image above it.
Is there a way to get the text from the lower div to be selectable, without making the upper div unselectable?
If you keep your structure, there's no way to select text from the first div, since the second one is positioned on top of it.
However I think you can change your CSS to have the same results and without overlapping the two divs. I propose some think like this :
HTML:
<div class="right-div">
<img src="images/point.png" class="img-a1">
Lots of text goes here.
</div>
<div class="left-div">
<img src="images/point.png" class="img-b1">
Some more text goes here
</div>
CSS :
.left-div {
position: absolute;
top: 0px;
left: 0px;
width: 250px;
}
.right-div {
position: absolute;
top: 0px;
left: 250px;
width: 250px;
}
.img-a1 {
float:left;
z-index:-1;
position:relative;
background: red;
}
.img-b1 {
z-index:-1;
position:absolute;
margin-left: 500px;
background: blue;
}
The rendering is pretty much the same as your example, and you can select both of the texts without any problems.
It is possible that you'll have to adapt the margins depending on the size of your images.
Related
I'm looking for a way to have two div over another one but without the text going under or over the floating div. What I mean by that is when the text from the <div class="text"></div> element is reaching <div class="barcode"></div> or <div class="uniq_barcode"></div>, I don't want the text to wrap on another line instead of going under the div. Here's an image with the div I'm trying to create.
I've tried to use <img> tag with align:right but it doesn't work for the second div. I think flexbox or grid would do the trick, but I'm not strong enough with those thing.
My code look this way and can actually be changed:
<div class="custom-container">
<div class="barcode"></div>
<div class="text"></div>
<div class="uniq_barcode"></div>
</div>
My CSS look like that:
.barcode, .uniq_barcode {
width: 300px,
height: 300px
}
The only thing I really need is the <dev class="text"></div> element for my text.
Thanks you.
Considering the structure of your HTML code, a first try would be the following CSS (not optimized). However, as #Kerri suggests, it'd be better to use flexbox in your case.
.custom-container{
position: relative;
height: 300px;
width: 300px;
}
.text,
.barcode,
.uniq_barcode{
position: absolute;
}
.text{
top:0;
left:0;
border: 5px solid red;
height: 300px;
width: 300px;
z-index: 1;
}
.barcode,
.uniq_barcode{
border: 5px solid blue;
height: 100px;
width: 100px;
z-index: 100;
}
.barcode{
top: 0;
left: 200px;
}
.uniq_barcode{
top: 200px;
left: 200px;
}
You can test the code at this link: https://jsfiddle.net/8vrwto16/1/
CSS grid and flex were developed for just this sort of layout. This seems like a job for flexbox.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
Quick and easy question. I'd like to have a floating box that stays in the bottom right of a div (in HTML). How would I do this with css?
Thanks! (attached is what I want it to look like)
Hope this will be what you are looking for.
.navBar {
height: 100px;
background-color: blue;
}
.div1 {
position: relative;
height: 200px;
}
.div1 .box {
position: absolute;
bottom: 40px;;
right: 40px;;
width: 200px;
height: 40px;
background-color: red;
}
.div2 {
height: 100px;
background: green;
}
<div class="main-container">
<div class="navBar"></div>
<div class="div1"><div class="box"></div></div>
<div class="div2"></div>
</div>
what you're looking for is:
position:absolute;
bottom:0;
right:0; which will position things relative to the positioned parent.Note that the parent element (div) needs to have its position set as well. Most people do position:relative;
The values bottom:0 and right:0 means to move it 0px away from the bottom of the parent and 0 px away from the right side of the parent.
See the following w3schools for further information:
https://www.w3schools.com/css/css_positioning.asp
https://www.w3schools.com/css/tryit.asp?filename=trycss_position_absolute
I'm just starting to look at html/css and having some problems getting my head around how the layout engine works.
I'm from a c# background and anything with hardcoded widths/heights feels like something is wrong. One of the first things I discovered is that you can't make divs expand to fill their available height in a sensible way, so I've been using tables.
The UI I want is basically a grid, which is the main part of the page with a side panel. The idea is to navigate the grid with the arrow keys and then select options for a cell using the side panel - its a fairly straightforward master/detail.
I'm happy with using a table to seperate the two columns but the problem I'm running into is in the side panel:
I want to have a search box at the top. When you type into the search box it 'autocompletes' to show you a options relevant to what you just typed.
The first problem I had was that the search box wasn't at the top of the cell in the grid. So I was using:
position: absolute;
top: 0;
for the <input> with a position:relative set in the td.
I was then using another div inside the cell to layout the results. That works fine but the search box obscures the first item.
I then tried changing the search box to have display: block which solves the problem but means the search box isn't top aligned when there are no search results!
It seems like using the display and position attributes are mutually exclusive so how do I achieve this in a sensible way?
One option seems to be to just use tables for everything, is there anything wrong with that?
#mainLayout
{
width: 100%
}
#turnSelectionPanel
{
/*visibility: hidden;*/
width: 30%;
height: 100%;
background-color: saddlebrown;
/*this is to allow positioning within this element using 'absolute'*/
position: relative;
}
#turnSearchBox
{
min-height: 20px;
max-width: 200px;
min-width: 100px;
display: block;
/*or
position: absolute;
top: 0;
*/
}
<body>
<table id="mainLayout">
<tr>
<td>
<table id="roster"></table>
</td>
<td id="turnSelectionPanel">
<input type="text" id="turnSearchBox"/>
<div id="turnArea">
</div>
</td>
</tr>
</table>
</body>
I've ommitted some of the other css for brevity's sake + some of the stuff shown there is basically irrelevant - widths etc.
The table + sidepanel is populated from javascript
This is a basic structure that you can you use.
<body>
<!-- This is a wrapper that controls the total height and width of page elements -->
<div id="mainLayout">
<!-- You can position the elements however you would like. -->
<div id="leftColumn"> ...Code goes here... </div>
<div id="searchBar"> ...Code goes here... </div>
<div id="rightColumn"> ...Code goes here... </div>
</div>
</body>
I am particularly fond of using float:left; to arrange my elements. Something like:
#mainLayout {
width:100%
height:100%;
}
#leftColumn {
width:75%;
height: 100%;
float:left;
}
#searchBar{
width:25%;
height: 10%;
float:left;
}
#rightColumn {
width:25%;
height: 90%;
float:left;
}
This will create a layout that scales with the window, and gives you a left column and a right column with a search bar above it. Obviously if you know what size you want your elements than you can simply set them.
I'm not a fan (at all, really) of using floats, so this is my approach on your layout:
I'm not sure if you want a left column, but I've added one in for your choice anyway:
.left, .nav,.right, .content {
display: inline-block;
position: absolute;
position: absolute;
}
html,
body {
margin: 0;
padding: 0;
}
.nav {
width: 75%;
background: lightgray;
height: 100px;
top: 0;
left: 0;
}
.left {
width: 20%;
top: 100px;
left: 0;
background: darkgray;
height: calc(100% - 100px);
}
.right {
width: 25%;
top: 0;
right: 0;
background: gray;
height: 100%;
}
.content {
width: 55%;
height: calc(100% - 100px);
background: lightblue;
top: 100px;
left: 20%;
}
#search {
position: relative;
width: 90%;
margin: 2%;
}
<div class="nav">I'll go most of the way along the top</div>
<div class="left">I'll be a column on the left</div>
<div class="right">
<input id="search" type="text" placeholder="Search Me" />
<br/>
<div class="furtherContent">
I'll be a column on the right</div>
</div>
<div class="content">I'll be a content</div>
I am trying to put a ribbon that is as wide as my content but 'spill' the sides over to the body. Example here. This is the HTML I have so far. There are three images: the middle part of the ribbon and then two sides. I put the middle part in the h1 and now I am trying to line up the sides.
<body>
<div id="container">
<div id="leftside">
</div>
<div id="rightside">
</div>
<div id="content">
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
My shot at the CSS. I've been experimenting and this does what I need it to but I am sure there are a million better solutions. I want to know what the best practice would be for this since I am sure I'm kind of breaking a lot of rules here.
#container {
width: 825px;
min-height: 960px;
margin: 0 auto;
}
#left {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: -58px;
}
#right {
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
height: 48px;
position: absolute;
margin-top: 20px;
margin-left: 825px;
}
#content {
width: 825px;
min-height: 700px;
margin: 0 auto;
background: url(other.jpg) repeat;
margin-top: 20px;
margin-bottom: 20px;
top:0;
overflow: auto;
}
h1 {
text-indent: -9999px;
background-image: url(banner.jpg);
background-repeat: repeat-x;
margin-top: 0;
height: 48px;
}
There definitely are a million ways to accomplish this. The best approach will depend greatly on how your site progresses.
What it comes down to is relative and absolute positioning.
One way to accomplish this is to structure your site something like so:
<body>
<div id="header">
<div id="ribboncenter"></div>
<div id="ribbon1"></div>
<div id="ribbon2"></div>
</div>
<div id="content">
Your content
</div>
<div id="footer">
Your footer
</div>
</body>
That's very loose frameworking for a typical site. The CSS would be something like so:
#header{
width:800px; //Subjective to however big you want your site
margin:0 auto; //Positions the header in the center
position:relative; //Tells nested absolute elements to base their positions on this
}
#ribbon1, #ribbon2{
position:absolute; //Position is now based on #header and is pulled from the regular DOM flow
width:50px; //Subjective to whatever the width of your "ribbon" is
top:10px; //Subjective to how far down from the top of #header you want it
}
#ribboncenter{
width:100%; //Sets width to the width of #header
background:url(ribboncenter.png); //Subjective to image
#ribbon1{
left:-50px; //Subjective to the width of the image, moves it 50px left of #header
background:url(my-ribbon1.png); //Subjective to whatever your image is
}
#ribbon2{
right:-50px; //Subjective to the width of the image, movesit 50px right of #header
background:url(my-ribbon2.png); //Subjective to whatever your image is
}
Here's the example http://jsfiddle.net/NZ8EN/
This is all very loose but hopefully gives you an idea of the direction to take.
There are definitely other ways to solve this as well.
Try putting the #right and #left divs inside the #content div, give #content a position of relative (so that it becomes the parent reference for the children #left and #right) and position absolutely the #left and #right:
HTML:
<body>
<div id="container">
<div id="content">
<div id="leftside"></div>
<div id="rightside"></div>
<header>
<h1>This is the body of the ribbon</h1>
</header>
</div>
</div>
</body>
CSS:
#left {
position: absolute;
top: 0;
left: -59px;
}
#right {
position: absolute;
top: 0;
right: 59px;
}
Unless you're supporting IE7, I'd probably go with something like this:
http://jsfiddle.net/G5jkt/
This is the CSS you'd need to add:
h1 {
position: relative;
}
h1:before {
content: '';
height: 100%;
left: -59px;
top: 0;
position: absolute;
background-image: url(side.jpg);
background-repeat: no-repeat;
width: 59px;
}
h1:after {
content: '';
width: 59px;
height: 100%;
background-image: url(side.jpg);
background-repeat: no-repeat;
right: -59px;
top: 0;
position: absolute;
}
And you've have to change your HTML like so:
<div id="container">
<div id="content">
<header>
<h1>Hello Here</h1>
</header>
<div>
</div>
Using :before and :after helps remove design specific HTML from the document and gets the job done.
The key is using absolute positioning. In your example, you have your ribbon ends at the top of the page -- they have no relationship with the H1 you're trying to base their position off of.
The easiest way to do this would be dropping the HTML responsible for this ribbon ends within the H1. This, however, is not semantically the best. You could add a wrapper around the ribbon ends AND the H1, but that's extra markup.
By using :after and :before, you're using the H1 as the parent since it has a position of relative, and absolutely positioning the pseudo :before and :after elements relative to that H1. This is ideal since the pseudo elements can now inherit things like the height, background color, etc.
I want to make 2 divs beside each other to be aligned on the same horizontal line WITHOUT FLOATs
I've tried Position:relative ,, but no luck
See the example below :
http://jsfiddle.net/XVzLK
<div style="width:200px;height:100px;background:#ccc;">
<div style="background:Blue; float:left; width:100px; height:100px;"></div>
<div style="background:red; float:left; margin-left:100px; width:100px; height:100px;"></div>
</div>
From the link above, I need the red box to be on the same line of blue box with no space below ..
EDIT : I want the red box to stay outside the container gray box (just as it is) thanks
Relative with inline-block display
#one {
width: 200px;
background: #ccc;
}
#two {
display: inline-block;
background: blue;
position: relative;
left: 0;
width: 100px; height: 100px;
}
#three {
display: inline-block;
background: red;
position: relative;
left: 0;
width: 100px; height: 100px;
}
<div id="one"><div id="two"></div><div id="three"></div></div>
EDIT
The code below also works fine. Here, because of comments, the line feed is commented out and ignored.
#one {
width: 200px;
background: #ccc;
}
#two {
display: inline-block;
background: blue;
position: relative;
left: 0;
width: 100px; height: 100px;
}
#three {
display: inline-block;
background: red;
position: relative;
left: 0;
width: 100px; height: 100px;
}
<div id="one">
<div id="two"></div><!--
--><div id="three"></div>
</div>
Why it works block displays take the whole width of their container, even if you set a very small width, rest of the space
will be taken as margin (even if you remove margin). That's just how
they behave. inline-block displays work much like inline displays
except that they do respect the padding etc you give them. But they
still ignore margins (someone correct me if I am wrong). Same as
inline displays, if you give a line-feed between them in your HTML,
it's converted to a small space. So to remove that, Here I have the
HTML in a single line. If you indent the code then the div#three
will be pushed down (as you have fixed width of div#one so height is
only option.)
Use Position properties when your height and width are fixed
<div style="width:200px;height:100px;position:relative;background:#ccc;">
<div style="background:Blue; position:absolute; left:0%; width:50%; height:100%;">
</div>
<div style="background:red; position:absolute; left:50%; width:50%; height:100%;">
</div>
</div>
If you want to avoid float, position and inline-block, here's a margin-only solution:
<div style="width:200px; background:#ccc;">
<div style="background:blue; width:100px; height:100px;"></div>
<div style="background:red; width:100px; height:100px; margin:-100px 0 0 100px;"></div>
</div>
Updated fiddle
If you want your divs on same line without floats you can use display: inline-block; and give some negative margin value to your div because inline-block contains some margin between them.
See this fiddle
As your Edited question I have submitted another fiddle here
Or you could simply add margin-top: -100px; to your fiddle.
http://jsfiddle.net/XVzLK/22/
<div style="width:200px;position: relative; background:#ccc;">
<div style="background:Blue; position:absolute; top:0; left: 0; width:100px;height:100px;"></div>
<div style="background:red; position:absolute; top:0; right: 0; width:100px;height:100px;"></div>
</div>
Setting position relative on the coloured divs makes their position relative to where they would have been in the document. I think what you wanted to do is make the containing div position relative, and the children divs positioned absolutely within it. I'm assuming that "with now space below" meant "with no space below"
There is a tutorial here that may be of use: http://www.barelyfitz.com/screencast/html-training/css/positioning/