Ok, this is driving me nuts!!
I want three div or span tags in a line. Left = a 57px width image; Right = a 57px image; Centre = A span image to fill the whole width.
<div class="bar-left"></div>
<div class="bar-span"></div>
<div class="bar-right"></div>
Basically I'm drawing a fancy hr line where each end fades out. I can get the left and right images aligned using float: left; and float: right; but the middle seems impossible.
Any ideas?
Would this be ok?
JSFiddle
The idea is to put left and right column on top and float them, then put margin to the content div so it doesn't wrap under floated ones...
<div class="bar-left"></div>
<div class="bar-right"></div>
<!- content goes in last -->
<div class="bar-span"></div>
CSS:
.bar-left
{
float: left;
width: 57px;
}
.bar-right
{
float:right;
width: 57px;
}
.bar-span
{
margin: 0 70px;
}
Put your floated divs before the non-floated ones:
<div class="bar-left" style="float: left; color: blue; background-color: blue; width: 57px;"> </div>
<div class="bar-right" style="float: right; width: 57px; background-color: blue;"> </div>
<div class="bar-span" style="background-color: green; display: block;"> </div>
traditionally, when you want to line things up like this end-to-end, you float all of them left or right.
Related
I am trying to add a div above my content div with the same width.
I would like it to only push down the content div, but it causes the sidebar div to move down as well.
<div id="container">
<div id="new-div">new div</div>
<div id="content">content</div>
<div id="sidebar">sidebar</div>
</div>
.
#container {
background: lightgrey;
width: 500px
}
#new-div {
background: darkred;
width: 300px
}
#content {
background: lightblue;
width: 300px;
height: 400px;
display: inline-block
}
#sidebar {
background: darkgreen;
width: 100px;
height: 400px;
float: right;
}
http://jsfiddle.net/zd9omqa7/2/
How can I avoid the sidebar div to move down? I would like it to always float in the right top corner.
The two easiest ways that spring to mind would be to either reorder the html so your sidebar comes first in the DOM:
http://jsfiddle.net/ctaylr/xxhdn1xb/1/
<div id="container">
<div id="sidebar">sidebar</div>
<div id="new-div">new div</div>
<div id="content">content</div>
</div>
or to use position absolute to brute-force move it to the top:
http://jsfiddle.net/ctaylr/warnjgp3/2/
(remember to position the container div relative for this to work)
Otherwise, you could look to wrap your left hand side "divs" in a container of its own.
Hope this helps!
Consider the fallowing example:
http://jsfiddle.net/swLyX/
With the fallowing HTML:
<div id="container">
<p> Some text aligned the same as the below set of images
<div class="inner"></div>
<div class="inner"></div>
<div class="inner"></div>
<p> And some other text
</div>
And CSS:
#container {
width: 299px;
background-color: #c55;
}
.inner {
float: left;
margin: 20px 40px 20px 0;
width: 60px;
height: 60px;
background-color: black;
}
p{
clear: both;
}
The issue at hand is the large empty space at the right side of the second div because the margin of the third div throws it over to the next row.
Has one red div containing some text and three smaller divs floated to the left with a margin to the top, left and bottom to keep the other elements at a distance. In a real setting imagine that the red div is the container of a blog post and adjusts the margin to the other content and that the three black divs are images.
The important thing is that both the text and the first black div should be horizontally aligned to the left. Is there any way to make the right margin of the third div not throw it onto the second row without changing the sizes of the margin between the divs or breaking the alignment of the elements?
If the goal is to have any number of items accommodate any number of parent container widths, then with CSS, alone, there's no easy way to figure out what are the 'right-most' elements.
What I would suggest doing is this:
http://jsbin.com/uvegef/1/edit
html:
<div id="outerWrapper">
<div id="wrapper">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
</div>
css:
#outerWrapper {
background: pink;
width: 89px;
overflow: hidden;
}
#wrapper {
width: 110%;
}
.item {
float: left;
background: blue;
width: 20px;
height: 20px;
margin-right: 10px;
margin-bottom: 10px;
}
The example above has a 89px outer parent wrapper, which is 1px shy of the 90px needed to fit 3 items + their margins.
The idea is to give the wrapper an overflow of hidden then add an inner wrapper with a width wider than the parent to accept the 'extra right margin'. Adjust as needed for the situation.
You can use the :last-of-type pseudo element. Add this to your CSS.
.inner:last-of-type {
margin-right: 0;
}
See here: http://jsfiddle.net/swLyX/5/
___________div class=MAIN_________________
div id=LEFT div id=RIGHT
__________________________________________
How can I achive that all the bottoms of the MAIN + LEFT + RIGHT box are glued together?
Basically locking the bottoms, say if there is a lot of contents in the LEFT box -> the RIGHT box will grow along with the LEFT and MAIN box.
__ follow up __
I don't know how to correctly implement into my code :(
http://jsfiddle.net/v572V/
I have copied the whole CSS file so it looks very messy. But the boxes are as follow
<div class="content home">
<div id="main">
<div id="sidebar">
Do you mean something like this : http://jsfiddle.net/teresko/EkTVv/
This is a variation on so-called "holy grail layout". Should work on all browsers, including IE6. The layout will expand to fit the longest of parts. If content is shorter then browser's height, then layout will extend to the height of the browser.
http://jsfiddle.net/rlemon/DjQup/
you float the left and right columns in the container. then have an 'inner' content container with padding to offset the floats... see the example above.
<div class="container">
<div class="left">asd</div>
<div class="right">asd</div>
<div class="middle">
<div class="middle-inner">
asdf
</div>
</div>
</div>
.container {
height: 600px;
widht: 800px;
background-color: #aaa;
clear: both;
}
.left, .right {
width: 100px;
height: 100%;
background-color: blue;
}
.left { float: left; }
.right { float: right; }
.middle {
background-color: green;
float: none;
height: 100%;
width: 100%;
}
.middle-inner {
padding: 0 100px;
}
it's not perfect but at least you can see the technique in play. gl.
I have three columns on a webpage. One at the left hand side. Other at the center and the last one at the right hand side. I want to shift the right div below the left div (and left div is an expandable div).
But the problem is that the right div and the center div have the same parent div. And the left div and the parent of right and center div have the same parent. This is what I mean to say-
<container>
<leftContainer>
<leftColumn>
<mainContent>
<rightColumn>
<centerColumn>
And I want to shift the <rightColumn> below the <leftColumn>. Is it possible ?
Also since I am working on a custom user stylesheet, I cannot change the code, I can only modify the CSS.
How do I do this ?
If you know the height of the left div, you can float: left each div and then use a negative margin-height on the centerColumn of the height of the left column.
Example: <-- click for a demo
<div id="container">
<div id="left_container">
<div id="left">left</div>
</div>
<div id="right_container">
<div id="right">right</div>
<div id="middle">middle</div>
</div>
</div>
<style type="text/css">
#container {
width: 160px;
}
#left {
float: left;
width: 80px;
height: 100px;
background-color: #eee;
}
#right {
clear: left;
float: left;
width: 80px;
height: 100px;
background-color: #ccc;
}
#middle {
float: right;
width: 80px;
height: 100px;
margin-top: -100px;
background-color: #aaa;
}
</style>
I don't believe this is possible with an "easy" fix. You can think of divs as boxes, and what you're trying to do is to keep the center column to the right of the left column while putting the right column below (which would distort the box).
There is a fix where you can make the rightColumn position absolute and set the position of the column relative to the window itself. However, I don't suggest you do this. Instead, you should probably modify the css and put the right column in the same parent div as the left column.
I want this design:
DIV1: auto-size DIV2: 160px
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
divnumberonediv divtwo
How do I solve this problem? I've tried stuff like floating left & right, but I just can't get them on the same line.
I want the div 2 to always be there, and the div1 to have a max-width of 40em, but resize to allow the div 2 to show at all times if its necessary.
My code:
<style="text/css">
#mainbulk {
padding: 1.5em 2% 1.5em .5em;
}
#ads {
width: 7.5em;
float: left;
display: table-cell;
padding: 0 0 0 2em;
}
#textcontent {
width: 70%;
float: left;
display: table-cell;
}
</style>
and
<div id="mainbulk">
<div id="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
<div id="ads" align="right">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
</div>
I'm encountering this problem:
http://www.screencast-o-matic.com/watch/c6lrXsXyQ
Try the following. ids are used for unique content and should be used once only per page.
Also tables are still worth considering in some circumstances. Using borders on your divs while you are working on the layout will also help (red and green borders below).
<html>
<head>
<style type="text/css">
.textcontent {
float: left;
border: 1px solid red;
width: 700px;
margin-bottom: 4px;
}
.ads {
float: left;
width: 120px;
border: 1px solid green;
}
.textcontent:before {
clear: left;
}
</style>
</head>
<body>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
<div class="textcontent">textcontent div content</div>
<div class="ads">ads div content</div>
</body>
</html>
Not really sure what you're after, but you can try what I've done here. You should only use an id on a unique element in a document, so if you want more than one, re-assign them as classes. display: table-cell; is not needed here.
HTML:
<div class="mainbulk">
<div class="ads">
ads would, hypothetically, be placed here if this were actually an actual website.
</div>
<div class="textcontent">
<p>This is the most amazing site in the world. It has a very nice design, and is perfect for everything. If there's something that this site can't do, then nothing can do it, but I'd suggest to try all of this site's features before complaining.</p>
</div>
</div>
CSS:
.mainbulk {
padding: 1.5em 2% 1.5em .5em;
border: 1px solid #000;
}
.ads {
width: 7.5em;
float:right;
text-align: right;
border: 1px dotted #f00;
}
.textcontent {
max-width: 40em;
float: right;
border: 1px dotted #00f;
}
I believe I can help!
What you have to do is very simple.. Let's say you want div1 and div2 to take up 100% of the screen. Just make a div with the id container. Set the padding to: 0 160px 0 0, And also set box-sizing and -webkit-box-sizing to: border-box.. All this does is Pushing the content away from the right side of the screen. The border-box setting will keep the width 100% instead of the default 100% + 160px.
Now you can place div1 in the container.. If everything is done correct you see a white space of 160px on the right side.
What you will do next.. You have to put div2 before div1 in your HTML.. After that set some css properties.. Div2 should float to the right and have the following margin: 0 -160px 0 0.
The divs are on the right places cause div1 isn't bothered by div2 because it's in an area which is forbidden for div 1 thanks to the padding of the container. Div2 however is not restricted to this area because of the negative margin.
There's one last thing you wan to do.. Lets say the containerDiv has nice borders and a simple backgroundcolor. When the div1 is longer han div2 thr container will not stretch for div2 because it is floated.. Thats why you shoukd put this in the very end of div1: .
This line creates a singe new line on the webpage at the point where there's no floating element beside it. In other words, it will save you!