Using CSS, is it possible to right-align two DIVs?
I have a title and I want to right-align a more link underneath it. The site is internal and so, unfortunately, IE7 is the primary browser. (We will upgrade to IE8 before the end of the year, and some are using Chrome). I'd like to avoid javascript, but I'm open to it.
The title changes, so absolute widths won't work. It should look something like this:
| Arbitrarily long title text
| more...
I've been all over the Googles looking for a solution, but everything I've found so far relates to right-aliging the content of a DIV, or to right-aligning a DIV to the page, or right-aligning a DIV within an absolutely sized DIV.
I can show you my efforts so far, but as none of them work, I don't think they're of much use.
<html>
<body>
<div style="float:left;">
Arbitrarily long title
<div style="float:right">more...</div>
</div>
<div style="width:0px; overflow:visible; white-space:nowrap;">
Arbitrarily long title
<div style="float:right">more...</div>
</div>
<!-- This sort of simulates what I want, but the title length is arbitrary and I don't want to have to measure the text -->
<div style="width:120px;">
Arbitrarily long title
<div style="float:right">more...</div>
</div>
</body>
</html>
If anyone knows of a duplicate question, I'd love to learn the secrets of your Google-fu!
EDIT
Image, as requested. The link is bordered with red. (I had to set the margin-left to 70px to achieve this affect.)
<div style="float:left; position: relative">
<div>Arbitrarily long title</div>
<div style="position:absolute; right: 0">more...</div>
</div>
http://jsbin.com/efixij/7/edit
Another way you might solve it (I don't have IE here, so I can't test it now, but I used similar styling on cross browser before).
Snippet
.title-block {
float: left;
position: relative;
padding-bottom: 1em;
}
.more {
position: absolute;
right: 0;
bottom: 0;
}
<div class="title-block">
<div>Arbitrarily long title</div>
<div class="more">more...</div>
</div>
This might not be very useful but give it a look:
Align main Div content to left and then the "more" div to righ as here :
<div style="float: left;">
<div>
Arbitrarily extra extra long title here
</div>
<div style="float:right;">
more...
</div>
</div>
<div>
<div> Business area </div>
<div> Inernal Audit </div>
<div style="text-align: right;"> More... </div>
</div>
<div class="one">
Arbitrarily long title Arbitrarily long title
<div class="two">more...</div>
</div>
.one{
width:auto;
float:left;
border:thin red solid;
margin:5px;
}
.two{
float:right;
}
DEMO
Related
I've recently discovered the use of pseudo elements as graphical elements for design purposes. I'm trying to use a ::after element on a div to create horizontal dividers between sections, below:
.banner {
position: relative;
width: 100%;
overflow: hidden;
}
.banner__text, .banner__logo {
width: 50%;
float: left;
}
.banner::after {
content: '';
position: absolute;
left: 0;
right: 0;
border-bottom: 1px solid purple;
}
<div class="app">
<div class="banner">
<div class="banner__text">
<h3>Hello World</h3>
<p>longer string here</p>
</div>
<div class="banner__logo">
<img src="//unsplash.it/159/250" />
</div>
</div>
<div class="banner">
<div class="banner__text">
<h3>Hello World</h3>
<p>longer string here</p>
</div>
<div class="banner__logo">
<img src="//unsplash.it/159/250" />
</div>
</div>
<div class="banner">
<div class="banner__text">
<h3>Hello World</h3>
<p>longer string here</p>
</div>
<div class="banner__logo">
<img src="//unsplash.it/159/250" />
</div>
</div>
</div>
However, you will notice that all the ::after elements stack right up at the top; is there a way I can have these absolutely positioned elements that have relatively positioned parents come after each div.banner?
Note: this question ::after pseudo element appearing before has such a specific answer I cannot determine the solution, although it is similar in scope...
UPDATE
Adding overflow: hidden to .banner fixes the after elements stacking up at the top, but they still appear before the rest of the content in each div.banner, while I'd like them after.
Add bottom: 0 to make the dividers appear at the bottom of each .banner. For simplicity you'll probably want to use a bottom border instead of an ::after pseudo-element for this, however. Not everything needs to be done with one. Having said that, there is nothing wrong with experimenting.
The solution here is to add overflow: hidden; to div.banner, per #Temani Afif's comment.
Codepen here
EDIT
Additional Reading
See this question for a detailed description of why this failed, what clearfix is, and how this is conventionally solved.
I'll start off by stating that I know this question has been asked a lot, but none of the answers I saw seemed to work for me.
Basically, I have some divs inside of a larger div. They'll have dynamic text, so I don't know how many lines each will be. The problem is that I can't seem to get the divs to size themselves to the parent's height. I want the column divs to take up the entire height of the row div (basically, I want that blue part to fill all the space between the bars).
HTML:
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
CSS:
.divOne
{
border-top:10px solid black;
}
.divTwo
{
background-color: #32649b;
height:100%;
color:white;
}
jsfiddle:
Now, what I've learned from other versions of this question are that
float:left might be screwing it up
height:100% doesn't work if the parent's height is defined
position:relative might help on the parent
The problem with the float is that I'm using bootstrap, and that's where the float is coming from, so I don't really want to mess with that.
I can't really define parent height, because it'll be dynamic based on the children.
I also tried messing around with position:relative on the parent and absolute on the child, but that seemed to get really screwy. I'm also guessing this won't work because I'm using bootstrap. It's possible that I'm just missing something, though. I'll admit to not being the greatest with CSS.
I don't know if I'm having these issues because I'm using bootstrap, or because I'm just being an idiot right now.
Something else that seems to be throwing a wrench into things: These columns will be laid out differently on smaller screens vs. larger ones. I actually want something along the lines of col-xs-12 col-md-3 for these.
The short answer is that you can't really achieve this within the constraints of the bootstrap framework. There are plenty of articles that explain why div elements can't stretch to the height of their container, and how to get around this problem. One of the solutions I'm most fond of is Faux Columns.
But, let's get a little more creative then that.
I came up with something that might work for your scenario, but requires a bit of change to your markup. Here's a solution that wraps the bootstrap grid with display: table.
http://jsfiddle.net/Wexcode/13Lfqmjo/
HTML:
<div class="table-container">
<div class="table-row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
<div class="col-xs-6"></div>
</div>
</div>
CSS:
.table-container {
margin: 0 -15px;
}
.table-row {
display: table;
width: 100%;
}
.table-row [class^="col"] {
display: table-cell;
padding: 0 15px;
float: none;
}
Note that for this solution to work, you must include enough col elements to stretch it all 12 columns (see that I added an empty .col-xs-6 div).
You can add
display:flex;
to divOne , and will act like you wanted.
in bootstrap 4 'row' class applies this on div, but in ealier versions you need to add manually if you expect such behavior.
Give .divOne a display: flex and remove the height: 100% from .divTwo:
.divOne
{
border-top:10px solid black;
display: flex;
}
.divTwo
{
background-color: #32649b;
/*height:100%;*/
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row divOne">
<div class="col-xs-3 divTwo">Some Text</div>
<div class="col-xs-3">
Some text that could wrap to multiple lines
</div>
</div>
<div class="row divOne">
<div class="col-xs-3 divTwo">Different Text</div>
<div class="col-xs-3 divThree">
With some more text
</div>
</div>
</div>
hi I have two container divs one of them has a div with an image background and i think this is the div that is causing problem. I tried removing both container divs and the gap was still here. there are no margins no paddings, and i know it is not the image that has this line its not there when i open it in photoshop. I am also using css reset
Where is this space coming from?
css
.container{
width:100%;
}
.container2{
width:100%;
}
.first-image{
width:1430px;
height:497px;
background-image:url('../images/introimg.jpg');
background-repeat:no-repeat;
background-size: 100%;
border:none;
}
.jamey{
width:35%;
}
.second-image{
width:1430px;
height:430px;
background-image:url('../images/secondimg.jpg');
background-repeat:no-repeat;
background-size: 100%;
}
html
<div class="container">
<div class="wrapper">
<div id="overlay"></div>
<div class="first-image">
<div class="jamey">
<p class="def">
JAMEY
</p>
<p class="rip-date">03.02.1997 - 09.18.2011</p>
<p class="def2">Anonymous hate messages were posted on his Formspring account including one that claimed:</p>
</div>
</div>
</div>
</div>
<div class="container2">
<div class="intro-div">
<div class="end-hate">
<h1>PUT AN END TO HATE.</h1>
<p>
ANYTHING WRITTEN ONLINE can become viral
</p>
<p>
We believe that the way we behave online should be no different from the way that we behave in
</p>
<button type="button">JOIN CAMPAIGN</button>
</div>
</div>
Your problem can be removed by,
.first-image
{
margin-bottom: -20px; // or desired settings !
}
You may try adding the
box-sizing: border-box;
It helps setting padding/borders (maybe you have one) internal to the element. If it has some effect you can override these settings later.
Anyway, it's recommended that you add a jsFiddle so we can see for ourselves.
I don't know much about html or css but I have done this much;
I want to stack divs so it looks like this (please excuse the bad drawing) ;
I have googled how to and tried different thing but the likes/dislikes boxes always end up not moving or move to the very left/very right.
<div style="float:left;width:300px;height:350px;text-align:center;">
<div style="float:left;width:500px;height:200px;text-align:center;">
<div id="wrapper">
<div style="align=center;">
<div id="first">1</div>
<div id="second">2</div>
These are th three divs I have.
First one has links [the add/message etc]
Second one has "thelastgecko" and profile text.
And I am trying to use the last box for likes/dislikes but whatever im doing it isn't working.
You usually use one "huge" div, set it below 1024 pixels wide so old screens can view it and then you usually center it in the middle of the screen. Then inside of that big div you put the "add me - message me - gallery" with a "float:left" or "position:absolute" I prefer the latter. then you make another div containing the "The last gecko" + dislikes & likes and center that div, then after that I would make another div and either do a "float:right" or a "position:absolute; left:'huge width minus this ones width".
I did write everything in text and readable since giving the code away doesn't teach as well.
But in case you still didn't get it, here's my idea:
<html>
<head>
<style>
body{margin:0px;padding:0px;width:100%;height:100%;}
#container{width:900px;margin:auto;margin-top:200px;}
#add_me,#dislike_text{position:absolute;width:200px;background-color:#ace;}
#last_gecko,#holder{margin:auto;width:500px;background-color:#eca;}
#likes,#dislikes{float:left;width:250px;display:block;background-color:#cae;}
#dislikes{background-color:#cea;}
#dislike_text{margin-left:700px;background-color:#eac;}
</style>
</head>
<body>
<div id="container">
<div id="add_me">add me<br>message me<br>wuts going on</div>
<div id="dislike_text">dislike text</div>
<div id="last_gecko">
Last Gecko
<div id="holder">
<div id="dislikes">dislikes</div>
<div id="likes">likes</div>
</div>
</div>
</div>
</body>
</html>
Made it workable, it will at least show you in what direction to move, It might not be the best way but it is my way.
You could do something like this: http://jsfiddle.net/jAKgd/
CSS
#wrapper {
width: 800px;
}
#leftColumn {
float: left;
height: 800px;
width: 200px;
margin-right: 5px;
}
#leftColumn a {
display: block;
}
#rightColumn {
width: 100%;
}
#contentDislike,
#contentLike {
display: inline-block;
width: 250px;
}
Obviously the height/widths can be changed to meet your needs. I was just doing a quick example.
HTML
<div id="wrapper">
<div id="leftColumn"> Link
Link
Link
Link
Link
</div>
<div id="rightColumn">
<div id="contentTop">
<img src="/images/image_name.jpg" alt="image text here" />
<p>THIS IS WHERE YOUR PROFILE TEXT WOULD SHOW. IT CAN EXPAND HEIGHT AS NEEDED.</p>
</div>
<div>
<div id="contentDislike">DISLIKE CONTENT HERE</div>
<div id="contentLike">LIKE CONTENT HERE</div>
</div>
<div>YOUR LOWER TWO COLUMNS WILL GO IN THIS DIV</div>
</div>
</div>
It's a bad way of design to use floats to place divs at some place.
It's a much better way to use, for example, a flex layout.
But this is not supported by all browsers (But nearly. If you can, take this option).
Another solution is this one:
Use the width option. You set the width of any div of your html to a fixed number, in percent, of course. Watch this example
But if you do this, you will have to pay attention for very large and very little screens, I think you would have to write alternative css style sheets which are working with (max-width) and (min-width).
And there is another solution: the gridlayout. It is part of the standards since 2013 (I think) but it's not well supported yet. But maybe in future.
Hope I could help
I am trying to make my own website and only know some basic HTML, I've searched the web for a bit and can't seem to figure out how to place text under an image and on the left of the image.
So pretty much:
[image] [text]
[text]
would pretty much be my layout of the web page. At the moment I can only float the image or align it to the left making the text wrap around the image, which I don't want. Can someone help me?
<div style="width:400px; clear:both;">
<img src="http://media.techworld.com/cmsdata/news/3246520/1998_google.jpg" style="width:300px; float:left;" />
<div style="width:100px; float:left;">
text beside image
</div>
</div>
<div style="clear:both;">
text beneath image
</div>
http://jsfiddle.net/Tw2v7/
This is a simple layout matter; I think it should be done without using a table.
You can add an additional "clear: both"-Element behind the text you are floating next to the image, like so:
http://jsfiddle.net/nENVN/
I would suggest using divs instead of tables and then using CSS to size and position the divs
<div class="image">Image goes here</div>
<div class="rtext">text on right of image here</div>
<div class="ltext">text below image here</div>
This is the basic style for the above
.image {width:200px; float:left}
.rtext {width:200px; float:left}
.ltext {width:400px}
the ltext div would then be set to a width that is to wide to sit next to the image or the rtext div. It would then be forced to sit below the other 2 divs. This should achieve the look you want.
Use floats:
<img src="" alt="" class="left" /><span>Your text goes here and will wrap around and below the image</span>
<p>More text to sit below the image</p>
The text will appear beside the image and then wrap around to the bottom if it's long enough
Is this what youre after?
http://jsfiddle.net/ptzDw/
Basic HTML Structure:
<div id="wrap">
<div id="left">
<img src="http://dummyimage.com/300x90/7999/fff" alt="image">
<p>text goes here</p>
</div>
<div id="right">
<p>text goes here</p>
</div>
</div>
CSS:
#wrap { width: 800px; }
#left { width: 300px; float: left; }
#right { width: 400px; float: left; margin-left: 10px;}