I am having issues to expand the div naturally like this:
I am not allowed to use percentages. I have tried to use them, but as soon as other items go between them, the second block goes down.
HTML code:
<div class="block1">
<ul>
<li>item long</li>
<li>item small</li>
<li>item sample</li>
</ul>
</div>
<div class="block2">
<a>This is a nice sample text</a>
</div>
CSS code:
.block2{
float:left;
border:1px solid blue;
}
.block1{
float:left;
border:1px solid red;
}
Here is my Fiddle
Replace float:left by overflow:hidden in .block2.
Fiddle
overflow:hidden is a little trick to trigger block formatting layout, so that the .block2 div sits at the side of the floated div. You can read more about block formatting contexts in this YUI article.
Related
I have a 2 column layout with a bootstrap nav in the right column. The problem is that content in the right column should sit immediately below the nav, but instead is pushed down to clear the left column. The result is that my right column has a nav, then lots of vertical white space, then the content.
Here's the code:
<head>
<link href="/css/bootstrap.css" media="screen" rel="stylesheet" type="text/css">
<style>
.left-column {
padding: 10px;
width: 300px;
height: 200px;
border: 1px solid black;
float: left;
}
.right-column {
padding: 10px;
color: red;
border: 1px solid black;
margin-left: 320px;
}
</style>
</head>
<body>
<div class="left-column">
<p>This is the left content</p>
</div>
<div class="right-column">
<ul class="nav nav-pills">
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
</ul>
<p>This is the right content</p>
</div>
</body>
The reason that the right content is pushed down is that the left column is floated, and bootstrap navs have an :after pseudo element with the rule clear: both;.
I have tried to find a way to do the 2 column layout without floating the left, but I need the right to take up the remaining horizontal space, and this is the only way I could do it.
I also tried:
removing the clear: both; rule, but I end up with the right content appended horizontally on to the nav
adding other pseudo elements after the nav
containing the nav in a floated block, per the notes on this mozilla page, https://developer.mozilla.org/en-US/docs/Web/CSS/clear
Any help is much appreciated.
The rules for floats apply to items within the same block formatting context. There are several ways to create a new block formatting context, per this article https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context. The option that worked best for me was to set the overflow property of the right column to auto. There is a good explanation here, https://developer.mozilla.org/en-US/docs/Web/CSS/overflow.
I have a responsive top bar menu. On the left I have 2 buttons in a <ul> element with float:left. On the right I have another <ul> element with a float:right align.
In the middle of the two lists, I have one <p> element that receives dynamic text.
This works on large screens, but in the small devices the last <ul> goes to down.
JSfiddle: http://jsfiddle.net/49zjn/1/
Resize the Result panel to view my problem.
Any ideas of how to solve this?
Thanks
Instead of
#right { float:right; }
Try
#right { position:absolute; top:0; right:0 }
What is the behavior that you would like? Do you want the status to resize or be the first to drop down to the next line?
The following will make the status drop down first...it's all about the order of your elements.
#left { float:left; }
#left li { display:inline-block; }
#right { float:right; }
#status { overflow: hidden; float:left; }
li, p { padding:5px; border: 1px solid #000; }
<div id="bar">
<ul id="left">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ul id="right">
<li>Item 3</li>
</ul>
<p id="status">Some long dynamic text here with system status</p>
</div>
Give more specifics on what you'd like (if this isn't it) and I'll take another crack at it.
Good luck!
Taken from w3schools (visit link to see what it looks like):
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
float:left;
width:100%;
padding:0;
margin:0;
list-style-type:none;
}
a
{
float:left;
width:6em;
text-decoration:none;
color:white;
background-color:purple;
padding:0.2em 0.6em;
border-right:1px solid white;
}
a:hover {background-color:#ff3300;}
li {display:inline;}
</style>
</head>
<body>
<ul>
<li>Link one</li>
<li>Link two</li>
<li>Link three</li>
<li>Link four</li>
</ul>
<p>
In the example above, we let the ul element and the a element float to the left.
The li elements will be displayed as inline elements (no line break before or after the element). This forces the list to be on one line.
The ul element has a width of 100% and each hyperlink in the list has a width of 6em (6 times the size of the current font).
We add some colors and borders to make it more fancy.
</p>
</body>
</html>
So, ul and a are float:left;. Now, float says that the next element should float around it, yet the text does not. What am I missing?
Second: Removing the float from the ul makes the text flow around it. What the serious heck?
Third: Removing the inline from li does nothing. Yet, removing the float from a puts whitespace between the elements.
Can anyone even try to explain why these things happen and don’t do what they should?
(Newest Chromium)
The width of the <ul> is 100%. The text has nowhere to go but below it.
The reason removing float:left from the <ul> will make the text appear to the right is that the <ul> will not be taking up visual space anymore since the contents are all floated inside a non-floated container. It will be 0px tall, and the <p> will STILL drop down below it because of the 100% width, but you won't notice it visually. You can test this by giving the <ul> a border and see what happens. The <p> will float next to the last floated <li>.
<li>s are not inline items. display:inline; and display:block are both incorrect. They are display:list-item;
It’s because when you set the <ul> width to 100%, the <ul> takes up the full width & pushes content below it. Changing your <ul> width to auto will achieve the effect you want:
ul
{
float:left;
width:auto;
padding:0;
margin:0;
list-style-type:none;
}
I am trying to work out how I would go about creating a website that has 3 separate 'layers' (top navigation, then content, then footer) each with a different background image, that tiles to 100% width... but I want my content to be centred (as if the containing divs had margin: 0 auto applied).
So far I have been attempting to create divs just for the background images, and then absolutely positioning my content divs, but allowing them to automatically centre.
But of corse, I am taking elements out of the 'flow' of the document there, and so my background image divs end up stacking up against each other.
This is really tough to explain so hopefully this example will help:
http://jsfiddle.net/RB46S/
As you can see, I have my blue div, where the background stretches to 100% BUT I WANT MY NAVIGATION AND A LARGE IMAGE TO CENTRE HERE.
I have my body which is green, then a hp_content div, this would be where all my content would sit, centred, the problem here is you cannot apply a margin or a padding value (i've applied them to show them not working), only a position from the top of the parent/browser, which will lead to problems when making my site responsive I believe.
Then I have my red div which is the same as the top navigation (blue) div, It has a 100% border but I want the footer stuff (twitter feed, latest blog post, and contact details) to be centred here.
Hopefully some one understands what I am trying to achieve and knows how to correctly set a page like this up, any help is much appreciated!
Jon
Ok! Try structuring your HTML something like this:
<html>
<head></head>
<body class="index">
<section class="top">
<header class="content">
<nav>
<ul id="">
<li>link 1</li>
<li>link 2</li>
</ul>
</nav>
</header>
</section>
<section class="main">
<div class="content">
<h2>Whatever</h2>
<div class="something">This is something else</div>
</div>
</section>
<section class="footer">
<footer class="content">
Footer content
</footer>
</section>
</body>
</html>
Then some CSS like:
body, html{
width:100%;
}
body {
background: green;
}
body > section{
width:100%;
}
/* this style will set all the section .content(s) to be 400px wide */
body > section > .content{
display:block;
margin:0 auto;
width:400px;
}
section.top {
height: 510px;
background: blue;
}
/* if you want to individually change widths for each section, do something like this:*/
section.top .content{
width:100%;
}
/* or not! */
section.main {
height:200px;
}
section.footer {
height: 400px;
background: red;
}
Play around: http://jsfiddle.net/FC2Ea/
So for each site section, you'd have a container for all of that section's content with an easy-to-remember class name like ".content". You can set all the content to the same width, or each section's content to different widths depending what you're going for. Either way, the sections will occupy 100% of the browser's width. Good luck! :)
If you add another Div within your each main Div and use style as
<div style="Width: 80%; float:right; margin-right: 150px;">
I guess that might help to an extent ?
<div class="top_shade">
<div style="Width: 80%; float:right; margin-right: 150px;">
<header>
<nav>
<ul id="">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>
</div>
</div>
Hi I have a container in witch there will be added multipe elements so I don't really know what the width of the container will be because the elements are added dynamicly.I need this container to be centered so I figure that I should use display:inline-block to make the div width and height to be set acording to it's elements but after I use this the property margin:0 auto does not work anymore.This is a simple example of what I am trying to achive:
<div>
<ul>
<li>All</li>
<li>Web Design</li>
</ul>
</div>
div{
display:inline-block;
margin:0 auto;
}
No matter how many elements are in that container I want it to be centered.My curent atempt does not work so how can I center this container?
You can do it by adding a wrapper div that has display block and setting text-align:center to it:
<div id="wrapper">
<div>
<ul>
<li>All</li>
<li>Web Design</li>
</ul>
</div>
</div>
div#wrapper{
text-align:center;
display:block;
}
div{
display:inline-block;
margin:0 auto;
}
see this fiddle.
Add text-align: center to the CSS.
div{
display:inline-block;
margin:0 auto;
text-align: center
}