I am trying to push my sidebar to the right of my page. When I do this my division gets pushed to the bottom of the page. Why is this?
Here is my page:
link text
It is because You use something like
<div id="Main">
<div id="content"></div><div id="sidebar"></div>
</div>
note that Div is a Block element.
You have 2 option to correct this issue. use from an inline element like span (instead of content andsidebar ) or convert div to an in-line element with css like
#sidebar, #content
{
display: inline-block;
}
Related
I Have a parent div 'site-branding' with 3 child divs inside it. The first element is an image with a logo, the second element the site title and the last element is the tagline. See HTML below:
<div class="site-branding">
<div class="site-logo"></div>
<p class="site-title">Title</p>
<p class="site-description">Some text here</p>
</div><!-- .site-branding -->
I want the logo to be in one column and then the title and tagline vertically aligned in column 2, something similar to this:
where left = logo, right top = title, right bottom = tagline. Now the caveat: I'm using a wordpress theme and subscription that limits how much i can customize - I cannot see or edit source files. So I CANNOT edit the html and wrap divs and containers etc nor can I add an javascript/jquery. It has to be done in CSS with the above HTML configuration.
EDIT: Ignore paragraph in right bottom block - the site tagline would just be a header as represented by the text "right bottom".
Cheers
This should do it:
.site-branding > .site-logo {
display: inline-block;
width = 50%;
margin-left: 0px;
}
I have a container that holds an image, some text and a footer
The image is situated at the top with the text underneath, followed by a footer that simply contains some additional metadata
I want to be able to hover over the content (Excluding the footer) and for it to all highlight
The issue I have is that I cannot make the "text" div span all the way to the bottom where the absolute positioned footer begins.
The footer will highlight on hover independently. I don't want the content hover to effect the footer and I don't want the footer hover to effect the content hover
Here's a codepen link to an example which shows that the blue highlight only covers to the bottom of the text, opposed to the entire panel up until the metadata footer http://codepen.io/anon/pen/bVNeqr
An assistance or guidance here would be greatly appreciated.
HTML
<div class="item">
<div class="content">
<div class="image">
<img src="http://lorempixel.com/output/city-q-c-300-200-4.jpg"/>
</div>
<div class="text"> Text here </div>
</div>
<div class="footer"> Footer </div>
</div>
Insted of position:absolute you can use css3 "flex" property to solve this problem. Try to add this to your code.
.item {
display:flex;
flex-direction:column;
}
.content {
flex-grow:1;
}
Here's an example
Something like this?
I just added some plain CSS stuff and it seems to work fine.
http://codepen.io/KingK/pen/bVNeoo/
.text
{ height: auto; }
I'm making a website and trying to create a login box. I have a website with two boxes of content, and I want to add a third "login box".
However, I can't seem to do this, because it appears above (when I have the current width of the container) or above (when I increase the width of the container to accommodate for the increase of space because of the box).
Also, margins don't seem to be affecting the newly created box either.
Here is what I want it to look like: http://i.stack.imgur.com/Kmm1g.jpg
And here is the current website: http://www.winterlb.com/
So my question is, what is the easiest way to accomplish this? Thanks.
You can put your login box and your nav box in the same div. Float this div and the main content div like so:
HTML:
<div id="navBar">
<div id="loginBox">
...
</div>
<div id="navBox">
...
</div>
</div>
<div id="mainContent">
...
</div>
CSS:
div#navBar {
float: left;
width: 200px;
}
div#mainContent {
float: left;
width: 600px;
}
Add the 'third box' inside your 'sidebar' and add another div to wrap your original sidebar content.
Style the approriate login div and navigation div. Float them left if needed.
Here's a sample html of what the structure should look like http://pastebin.com/3hLmGzRZ
You will never accomplish this properly without a doctype. You are in quirks mode. Add this to your first line and then see where we are:
<!DOCTYPE html>
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".
This is what I want my page to look like:
Mockup http://img64.imageshack.us/img64/5974/pagedh.jpg
I'm not quite there yet. Here's where I'm at:
http://labs.pieterdedecker.be/test/test.htm
I'm quite new to using <div>s (as opposed to <table>s) to create the layout of my pages. How do I get the job done?
You can fix the menu by just adding 2 CSS style rules:
.menu { overflow: hidden; }
.menu ul { margin: 0; }
The overflow will leave a taller menu because of the browser default <ul> margin, just clean this up with the second style, which will knock the margin out.
try including clear:both in the body div.
<div id="body" style="clear: both">
<p>This is my body</p>
</div>
good luck! ;-)
Simply add the below code:
<div style="clear:both; margin-left:20px;">
after the line:
<div id="body">
That is:
<div id="body">
<div style="clear:both;">
More info about the clear property.
Also, have a look at good tutorial:
Div based layout with CSS
the problem i'm seeing now is that your blue 'item' boxes don't look right. i think the reason for that is that the div containing the 'item' boxes should be contained inside the main 'body' box. it is in fact the very first thing inside the 'body' div.
to make this easier on yourself, you should create a div inside the 'body' div, with width: 100% and background: blue (or whatever color that is). then, inside that div you can create your list of items.
the obvious way to put the "items" inside the "item bar" would be to float:left all the items inside their own divs. you would then need to set a static height for the "item bar" itself (like height: 2em), because a div containing only floating elements has no height.