I have the following code
<div class="site-branding">
<h1 class="site-title">Test</h1>
</div>
<button class="menu-toggle" aria-controls="primary-navigation" aria-expanded="false">Navigation</button>
On my CSS, I put site-branding to float left and then menu-toggle to float right. On normal resolutions, the display is good. The brand is at the left side of the header and the menu-toggle is at the right but when the screen gets smaller, I want the menu toggle button to be below the site-branding div but the behavior that I got is that the menu-toggle is colliding with the site-branding div. Any ideas how to resolve this? thank you.
Float will ignore the element's collision box. You will have to use media queries to apply new CSS to your header when the screen is too small.
For example, if your branding is 300px wide and your toggle is 60px wide, you should use a media query of max-width: 360px, target another CSS file that will place the toggle below your branding image.
Here is an example of what does happens if you float these elements:
.headline {
float: right;
}
.btn {
float: left;
}
<div>
<h1 class="headline">Some link to your homepage</h1>
</div>
<button class="btn">some button</button>
(press fullscreen and resize your browser window)
The button element floats below the headline.
Now can you add the css classes for the button and site-title?
You will get the answer as you like if it rewrite it as follows. You just adjust the width of the div as you like.
Css
.FloatClass{float:left;}
Html
<div class="FloatClass">
<h1 class="headline">Some link to your homepage</h1>
</div>
<div class="FloatClass">
<button class="btn">some button</button>
</div>
All the best
Related
This has been driving me crazy. I want two side-by-side columns to work like so:
[Button] [Long text description] [Button] [Long text description]
I'd like the buttons to be the same width, and the text to not bleed into the column to the right. I tried to implement this like so:
multicol {
display: inline-block;
column-count:2;
-moz-column-count:2;
-webkit-column-count:2;
}
<!-- Imagine 20-25 of these in a row -->
<div class='container-fluid multicol'>
<div class='row'>
<div class='col-xs-5'>
<button class='btn btn-block'> (VARYING-LENGTH BUTTON NAMES HERE) </button>
</div>
<div class='col-xs-7'>
<p> (VARYING-LENGTH DESCRIPTIONS HERE) </p>
</div>
</div>
</div>
But my buttons start resizing on different screen resolutions, and they are not always the same size. How can I make sure the buttons have the same width (the entire column) at all times, regardless of screen resolution?
container-fluid is set to the width of the entire browser, and so the col-xs-5 element will always vary, as it will be a percentage of the browser width. btn-block will ensure that the button is 100% of the variable col-xs-5 width.
If you want the button element to be a set width regardless of screen resolution, I suggest giving the button element an explicit width,
e.g.
button {
width: 200px;
}
Long button text will likely break to a second line, but the button width will remain consistent.
I think you are trying to achieve something like this:
.col {
width: 50%;
float: left;
}
button {
width: 80px;
height: 22px;
}
<!-- Imagine 20-25 of these in a row -->
<div>
<div class="col">
<button>One</button>
<span>Description one</span>
</div>
<div class="col">
<button>One</button>
<span>Description one</span>
</div>
</div>
There is a unit in CSS relative to viewport. You can use vw for viewport width and vh for viewport height.
Example, if you want to have an element with width same as the viewport, then style the element like this:
element {
width: 100vw;
}
I have a <div> positioning issue on single-page web design. To be more specific — I can't find a way to fill the background properly, using the <div>s.
For some reason, the <div>s won't fill the background as I want — the background always stays visible (on left/right and top/bottom sides of the <div>s).
What I'm trying to achieve:
My entire page is a single-page website. The page is composed of 5 rectangle <div>s, "touching" each other in a vertical fashion (0 pixels of background between them). I don't want the background to be visible at any part of the page.
I want the top <div> to fill the upper part of the screen ("touch" the browser's upper menu) and the right/left sides.
I want each one of the 3 middle <div>s to "touch" the left and right sides of the screen (and of course touch the two <div>s above and below, without any space between them [no background seen]).
I want the bottom <div> to fill the lower part of the screen ("touch" the browser's lower menu) and the right/left sides.
I've tried to change the position value on the CSS part. The outcome was always a "twisted" version of the page.
My HTML code:
<div id="page1" align="center">
<a id="about"></a>
</div>
<div id="page2">
<a id="portfolio"></a>
</div>
<div id="page3">
<a id="Dream"></a>
</div>
<div id="page4">
<a id="contact"></a>
</div>
<div id="page5">
<a id="Love"></a>
</div>
My CSS code:
#page1{
height : 1000px;
background-color: #4c3719;
}
#page2{
height : 1000px;
background-color: #9a8479;
}
#page3{
height : 1000px;
background-color: #ddbad8;
}
#page4{
height : 1000px;
background-color: #ddd28d;
}
#page5{
height : 1000px;
background-color: #ed9aa9;
}
Write before all CSS code this
* {
margin:0;
padding:0
}
If I correctly understand this may help
I am working on this project: http://www.e-pedkelnes.beta.verskis.lt/
Actually what I have to do is to put a background without adding a class. The background has to be white with extensions for the menu and the footer element. It would be easy if it would be only an extension for the menu. Content is of different size and size depends on the elements in the screen. so, it is easy to put a background for the menu, but footer background will always be in a different position just because of the different sizing of the content. If you understood what I mean :), I would be grateful to get some help.
Within:
.foot-outer {
background: none repeat scroll 0 0 #E8E4E5;
border-top: medium none !important;
left: 2px;
padding-top: 15px;
}
I removed width and margin and that looked better. You should not have them set on the outer elements, only on the container elements.
Does that make sense?
EDIT:
Your HTML layout should be more like
<div class='header wrapper'>
<div class='header'>
</div>
</div>
<div class='content wrapper'>
<div class='content'>
</div>
</div>
<div class='footer wrapper'>
<div class='footer'>
</div>
</div>
Then apply backgrounds to the wrapper divs, and apply a centred width to the inner content divs.
I would like to make a simple panel with buttons that are placed horizontally and aligned to the right. Willing to align it to the left I can easily do this like that :
.button {
float:left;
background-color: #55cc66;
margin-right: 50px;
padding: 5px;
}
//......
<div id="switcher">
<h3>Style Switcher</h3>
<div class="button selected" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
But when I do the same with float:right it obviously aligns it to the right but in inverted order. I have also tried text-align: right, position: absolute; right:150; and position: fixed; right:150;. The last two align to the right but awkwardly overlap the 'buttons'.
How can I achieve this then ?
You can remove floats and align the container of your "buttons" to the right with the property text-align.
You don't want your heading to be aligned to the right so you've to cancel it with text-align: left;.
One problem remains: you're using non-semantic div when what you really want are buttons. You should use ... button elements (or maybe input[type"button|image|submit"]).
These ones are focusable and are made for an action taking place when clicked (with mouse, keyboard or tap).
Back to these div: they are displayed as blocks by default, you've to change for inline-block - IE8+.
Fiddle: http://jsfiddle.net/PhilippeVay/YZaRW/
Leave the class .button with float left, wrap all your buttons with another division (btn_wrapper) and add a specific width to it and float right. Just make sure that all your buttons fit inside the wrapper
.btn_wrapper{
width:300px;
float:right
}
<div id="switcher">
<h3>Style Switcher</h3>
<div class="btn_wrapper">
<div class="button selected" id="switcher-default">
Default
</div>
<div class="button" id="switcher-narrow">
Narrow Column
</div>
<div class="button" id="switcher-large">
Large Print
</div>
</div>
</div>
How can I right align a button inside a div without wiping it from the Markup Flow with valid CSS and HTML? Is applying margin-leftthe only way to do this?
I have a structure like this
<div class="navContainer">
<div class="title">
<span>Nav Titulo</span>
</div>
<div class="navContent">
Nav Conteudo
</div>
<button type="button">Enviar</button>
</div>
<div class="navContainer">
<div class="title">
<span>Nav Titulo</span>
</div>
<div class="navContent">
Nav Conteudo
</div>
</div>
If I apply button { float: right } or button { position: absolute } the next div will get over the button. It happens that I just want to make the button position at the right side
what you want to read up on is clearing
if you have floated elements, they go out of page flow, but any element with clear:both will stay in page flow, but not allow anything on either side of it, floated or not.
in practice, adding a clear:both element after you floats makes things work the way you want them to.
.navContainer { text-align: right; }
#Matt is right. What you need to do is clear the div elements.
.navContainer {clear: both}
If you want your button aligned at the top of the containing div, you might have to move it before your div element of class "title".