I have three links. I want to align them like one in the left, one in the middle and one in the right in a single line.
Say my links are prev(which I want place in the left of the line) home(which I want place in the middle of the line) and next(which I want place in the right of the line). So I wrote this code:
prev
lots of
home
lots of
next`
I understood this is wrong because its a fixed size and will cause problem if I resize my window or in a relatively small screen. So I tried this:
prev
home
next
But it didn't work!
So how can I solve this problem with HTML?
`
Wrap links with a div container and use left/right floats and text-align: center on the wrapper:
.wrap {
text-align: center;
background: #EEE;
padding: 10px;
}
.wrap .left {
float: left;
}
.wrap .right {
float: right;
}
<div class="wrap">
prev
home
next
</div>
Related
From all my searches I seem to be using the right technique but the centering just isn't happening.
This is the code block from my .html file:
<div id="section-movement" class="section-container">
<div class="section-title">
Movement <span class="center">*click entries for more details*</span><span class="float-right">limited by movement speed</span>
</div>
</div>
This is the entries in my .css file:
.center {
text-align: center;
}
.float-right {
float: right;
}
The output should be the word 'movement' left aligned, the text 'click entries for more details', should be centered and the text 'limited by movement speed' should be right aligned. The left and right text work fine but the 'click entries for more details' text is not centering, it just immediately follows the 'movement' text.
span is an inline element by default. The way you use centering is inside a span element, which doesn't do anything since it's inline.
You can use <div>s instead of <span>s, which are block elements (default width: 100%), but I don't know if this is what you imagine - in your current code you are trying to center some words which basically are part of a text paragraph...
It seems you want to distribute three parts of a sentence left, middle and right. You can put all three parts into DIVs or SPANs (in this particular case it won't matter since they all become flex items by the flex definition of their container) and add this rule for their parent element:
.section-title {
display: flex;
justify-content: space-between;
}
Here's the complete code:
.section-title {
display: flex;
justify-content: space-between;
}
<div id="section-movement" class="section-container">
<div class="section-title">
<span>Movement</span><span>*click entries for more details*</span><span>limited by movement speed</span>
</div>
</div>
I'm pretty sure you can just use the center tag...?
So it would be:
<'center>
...Content you want centered...
<'/center>
But without the apostrophe's.
Try something like this.
I made a minor update to your HTML and put the word "Movement" in a span that I floated left. I floated the span with a class of right to the right and added text-align: center to the div with a class of section-title that centered the span with a class of center.
Note that you don't need a text-align: center rule on the div with a class of center.
.section-title {
text-align: center;
}
.left {
float: left;
}
.right {
float: right;
}
https://jsfiddle.net/eulloa/k7LL0byt/1/
I have boxes that I want to float left, so they would be aligned side by side. But I have a problem. If I set float: left; I get this:
left aligned
They jump out of parent div (gray div). If I set float: none; I get this: float: none
Boxes stay in div, and div stretches with them, but they are one under another, which I don't like. How would i achieve left aligned boxes inside div?
CSS of the boxes:
.parent {
float: left;
width: 200px;
background-color: white;
border: 1px solid rgb(230,230,230);
margin: 10px;
}
You have to use overflow css rule. In the grey box add following css property:
overflow:hidden;
After applying this property you will get the items inside grey box and they will not fall outside it.
You need to give <div style="clear:both"></div> to inside parent div in last.
<div class="parent">
your code
<div style="clear:both;"></div>
</div>
whenever you use float you need to clear it by assigning clear: both to its parent
I am completely stuck trying to get a left chevron and a right chevron to display on either side of a date in an h1 tag. I want a user to be able to click on either chevron to move forward or backward one day. However, no matter what combination of div or img classes and position, float, display it still looks like the screenshot attached, even though I've made sure the document is updating.
How can I modify the HTML/CSS so the chevrons are placed on the same line as the date?
<div class= "dater">
<div class="chevron-left">
<img src="glyphicons-225-chevron-left.png"/>
</div>
<h2><%= #todie %></h2>
<div class="chevron-right">
<img src="glyphicons-224-chevron-right.png"/>
</div>
</div>
EDIT: My solution based on Rob's answer.
.chevron-right img {
float: right;
}
.chevron-left img {
float: left;
}
.dater {
margin-left: auto;
margin-right: auto;
width: 100%;
margin-top: 60px;
margin-bottom: 40px;
}
.dater h2 {
text-align: center;
font-weight: 400;
float: left;
}
The reason for your problem is you have the images contained within block level elements which occupy the full width of the browser viewport. Even then it won't work exactly as you wish but there are many ways to accomplish it.
First, you can put the images inside the <h2> to the left and right of the text. That's the easiest way.
Second, you can use the CSS pseudo classes ::before and ::after
You can also set the width of the <h2> and float the everything, images included but the must be set to inline to help this along.
There are more ways than just those.
On the site I'm currently coding I have a centered DIV containing a float left column and a smaller float right column. This works fine.
In the Left floating column, I have a further float left column, containing an bio image, and a float right text column containing the bio text.
However, I am at the point of throwing my computer out of the window because the last two bio divs are sitting on top of each other, with the text underneath the photo instead of floating next to it.
I have put every combination of clear divs and overflow: hidden; I can reasonably think of, but to no avail.
The page in question is here: http://test.phantomlimb.net/about.php and the CSS is here: http://test.phantomlimb.net/phantom.css
I would greatly appreciate anyone pointing me in the right direction to solve this annoying conundrum before I break down and *gasp!* accomplish the same effect using tables in around 3 minutes!!!
PS I'm more of a designer than a coder, so please feel free to explain things as you would to a child.
Did you try this?
Add float: left; to your .bioleft class in phantom.css
Alternatively add float: right; to your .bioright class
You are missing colons in your css file. e.g. you have
.bioleft {
float left; /* HERE */
width: 25%;
background: red;
display: block;
}
.bioright {
float right; /* AND HERE */
width: 70%;
background: cyan;
display: block;
}
You should have float: left; and float: right;
IT is because of improper syntax you have float left; it should be float: left;
Have you considered using floated divs for the container left and right divs, then just use inline blocks for the divs inside the floated divs?
<div id="left">
<div id="img"></div>
<div id="content"></div>
</div>
And
#left {
float: left;
}
#img,#content {
display:inline-block;
}
#img {
width: 100px;
}
#content {
width: calc(100% - 100px);
}
That should put the image and the content side by side, but they will be treated as a block div.
You could actually put both the image and content divs inside their own container div and name that biog as the id, to create its own 'block'
I defined two CSS classes that set the background to an image (shown below). One is a yellow block, and another is a grey block.
.block-gray { background: url('grey.gif'); width: 15px; height: 3px; }
.block-yellow { background: url('yellow.gif'); width: 15px; height: 3px; }
What I want to be able to do is to define a variable number of div's using one of the classes above, and have them horizontally stacked, and centered within a larger container.
So if I defined 3 blocks like so:
<div>
<!-- The # of these is variable, and not necessarily fixed at 3 -->
<div class="block-yellow"></div>
<div class="block-yellow"></div>
<div class="block-grey"></div>
<div>
Then I would like them to be centered within the outer div, no matter how many inner divs there are. I can use float:left to stack them horizontally, but I'm not sure how to keep them centered.
| |
Any ideas?
Thanks.
.container { text-align: center; }
.block-yellow { display: inline-block; }
and you might want to reset that text-align:
.block-yellow { text-align: left; }
well, don't use float:left; instead, use display:block and set the outer div as text-align:center