I have a link and a button, each in their own div, and then wrapped in a shared div. The link is centered on the page, and the button is aligned to the right side of the page. I want to keep this, but have the two items on the same line. How can I do this?
Use floats on your divs, something like this:
<div class="wrapper">
<div class="center">
center
</div>
<div class="right">
right
</div>
</div>
and for css:
.wrapper {
width: 100%;
}
.center {
float: left;
margin-left: 50%;
}
.right {
float: right;
}
http://jsfiddle.net/uK5hM/
Related
This code:
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div id="columns">
text
</div>
Is coded with this css:
#columns {
width: 200px;
float: left;
margin-left: 20px;
margin-right: 20px;
}
The problem is that if I put any text below the three columns created, it just adds another column! I want the footer to be below these columns, but I can only do this so far by setting this:
footer {
/*height: 50px;*/
text-align: center;
position:absolute;
bottom:0;
}
And this just makes the page longer, i.e. puts a huge gap between this content and the footer.
Any solutions?
Thanks
Elements are floated left making document flow modified. Document flow needs to be reset right before writing footer. It can be done by setting property clear:both for the footer (in fact just after .columns are finished).
A working jsfiddle is here.
CSS:
footer{
clear: both;
}
Suggestion (outside scope of question):
You should change id="columns" to class="columns" as in valid html markup, id's should be unique. (thanks michael)
try this
demo
css
*{
margin:0;
padding:0;
}
#columns {
width: 200px;
float: left;
margin-left: 20px;
margin-right: 20px;
background-color:red;
}
.clearfix{
clear:both;
}
footer {
/*height: 50px;*/
text-align: center;
position:absolute;
border:1px solid red;
}
html
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div class="clearfix"></div>
<footer>footer</footer>
When using any floated items, the default behavior is for them not to count towards other content in that area, so they'd appear to one side of other content.
Of course, if you want to prevent that, the clear property will essentially continue below any floated items on one (or either) side before it.
footer {
height: 50px;
clear: both; /* can also use `clear: left` here */
}
try after removeing bottom:0; and put below html code after third column
<div id='footer'>
<p>Footer Content</p>
</div>
You need to use the css clear for your problem
like clear :both for id/class of you div
text
<div id="columns">
text
</div>
<div id="columns">
text
</div>
<div style="clear:both"></div>
<footer>footer</footer>
I am trying to set up a border layout with top, left, center, right, bottom. I have seen a few examples and tried them, but none of them seem to work. The main problem is with the left, center, and right columns. I can only get two divs aligned horizontally, the third always falls below the footer. I need this to be resizable. Preferably the center pane will fill the full until the borders.
I have tried float left and float right but it didn't make a difference.
This is what I have tried so far.
http://jsfiddle.net/xQVWs/2/
<body>
<div class="top-wrapper">
<div class="content-wrapper">
<header>
header
</header>
</div>
</div>
<div class="mid-section">
<div class="left-wrapper">
Left Pane
</div>
<div class="main-content">
Main pane
</div>
<div class="right-wrapper">
right pane
</div>
</div>
<div class="bottom-wrapper">
<div class="content-wrapper">
footer
</div>
</div>
</body>
You could use float:left on the first two middle columns and a float:right on the third. I would put an overflow:hidden on the wrapper for the middle columns.
http://jsfiddle.net/zer6N/1/
.mid-section
{
background-color: blue;
width: 100%;
height:1000px;
overflow:hidden;
}
.left-wrapper, .right-wrapper {
background: #ffff00;
height: 100%;
min-height: 100%;
width: 21%;
display:block;
float:left;
margin:0;
}
.right-wrapper {
background:#efefef;
float:right;
}
.main-content {
background-color: black;
width: 58%;
height: 100%;
margin:0;
float:left;
}
Im working on a site right now, and I have run into the problem with my text. When I zoom out, the text begins to stack and actually goes out of my div. I have the div at a fixed width and height, and have it wrapped out in other divs, and cant figure this out for the life of me. Only the text moves though, everything else stays put. It looks kinda likes this
Desired:
this is my text
in the way that
I want it to be
actual:
this
is
the
text
As I zoom out the text tends to stack up and push out of the div.
.content {
width: 960px;
margin: 0 auto;
}
.contentleft{
float: left;
width: 480px;
}
.contentright{
float: right;
width: 480px;
}
.boxone {
float: left;
clear:both;
height: 211px;
width: 230px;
background-image:url(../images/rec1.png);
}
.textone {
width: 220px;
height: 200px;
overflow:hidden;
clear: both;
}
HTML
<div class=content>
<div class=contentleft>
<div class=boxone>
<div class=textone>
<p> TEXT TEXT TEXT TEXT </p>
</div>
<div class=learnone>
</div>
</div>
<div class=boxtwo>
</div>
</div>
<div class=contentright>
<div class=boxthree>
</div>
<div class=boxfour>
</div>
</div>
</div>
what can I do to stop that text from moving?
It's a browser behaviour to zoom all the items in the page, but as a developer you can specify a font-size in pixel.
font-size:12px;
Try simple just increasing the width of the div.
Example
.contentleft {
width: 800px;
}
It should be very simple, but I am, so it's not ...
The first thing on the page, right after <body>, I want a sort of banner, containing some text which is left aligned, and an image which is right aligned. It should occupy te full width of the page.
Can you do that without knowing the width og the image?
Yes, put image in one div, and text in another, define "float: right" property for the div with the image, and "float: left" for div with the text in CSS
<div class="div1"><img src=...></div>
<div class="div2">text</div>
<style type="text/css">
.div1 {
float: right;
}
.div2 {
float: left;
}
</style>
<div id="banner">
<div style="float: left; width: 50%;">
left - just put your text here
</div>
<div style="float: right; width: 50%;">
right - just put your image here
</div>
</div>
You may also want to use a clearfix (google it) technique to ensure the banner div always has height no matter how big the image is.
Here's a fiddle : http://jsfiddle.net/KaHjd/1/
I've assumed that you want the image right aligned as well.
#header {
overflow:auto;
}
#branding {
float: left;
padding: 10px;
background: #00AA00;
}
#logo {
float:right;
padding: 10px;
background: #aa0000;
overflow:auto;
}
#logo img {
float:right;
}
<div id='header'>
<div id='branding'>
some text
</div>
<div id='logo'>
<img src='http://placekitten.com/200/100'>
</div>
</div>
Of course we can. But your image must be small enough in order for your text not to overflow the banner.
HTML
<div class="banner">
<span>Text goes here</span>
<img src="" alt="" />
</div>
CSS
.banner { overflow: hidden; width: 100%; }
.banner span { float: left; }
.banner img { float: right; }
I'm having an issue aligning three divs inside a parent div, the effect I need is the following
|IMAGE| +TEXT+ |IMAGE|
Each div contains an Image (2) and the text (1) respectively. Aligning them is easy, the problem is that I want the CENTER div to auto width to the size of the browsers' window and keep the other IMAGE divs always on the right and left side respectively.
Something like this for example, if the user maximizes the window:
|IMAGE| +++++++++++++++++++TEXT++++++++++++++++++++++++ |IMAGE|
As you can see, the idea is that the center div grows, and auto width but keeping the structure.
How could I get that behaviour? Thanks in advance.
#container { text-align: center; }
#div-1 { float: left; }
#div-2 { display: inline; }
#div-3 { float: right; }
If that still doesn't behave how you want, please give more detailed requirements.
Here is another inline implementation for three images side by side:
<div style="text-align:center">
<div style="float: left"><img src="image1.png"/></div>
<div style="display: inline"><img src="image2.png"/></div>
<div style="float: right"><img src="image3.png"/></div>
</div>
This works rather well as well.
.container{width: 100%; padding: 5px;}
.fig-left {float: left;}
.text {float: left;}
.fig-right{float: right;}
/* add margins maybe */
.text, .fig-right, p{margin: .75em;}
and HTML https://codepen.io/tradesouthwest/pen/MWELwGN to test
<div class="container">
<div class="fig-left">
<img src="https://picsum.photos/id/1055/200/300"/>
</div>
<div class="text">
<p>ABCDEFGHIJKLMNOP don't forget the alt in images QRSTUVWXYZ</p>
</div>
<div class="fig-right">
<img src="https://picsum.photos/id/1055/200/300"/>
</div>
</div>