I would like to position three items in CSS using float.
In the top left--logo
To the right of the logo, the navigation, which is an unordered list, ie floating left.
In the top right, a 2 line sign up for newsletter field--copy top row and form field with submit bottom in the second
I've given each it's own Div tag but can't see to get it to work with float. Only absolute positioning which doesn't look good when the site is resized. I put a table inside the div right now but would love a pure CSS solution.
I can get the logo to float left and the sign up field to float right but can't seem to get the navigation properly positioned. Either it goes all the way left or I put a clear in and it goes below the logo and field.
Any suggestions would be appreciated.
What about the following?
.floatleft_logo
{
float: left;
width: 200px;
}
.floatleft_nav
{
float: left;
width: 600px;
}
.floatright_email
{
float: right;
width: 300px;
margin-left:-250px;
}
Put all three in a 850px-wide container div and this works for me in a test page.
If I've understood it correctly, maybe you could set the first and second element to float: left, and then set the margin of the third element equal to the width of the first and second?
You could also set the first element to float left, the third to float right, and the second with a margin equal to the width of the first element. Like a three-column layout.
Related
So basically, I want two divs to sit inside another div. The first one is sitting inside with no issues, but the second one floats underneath the parent. When I add overflow:hidden I can't see the div anymore. The closest I've gotten to a solution was to add overflow:auto, but that just creates a scroll bar. I have tried resizing, different positioning, overflow and clearfix but so far I can't find a solution. Any ideas guys? JSFiddle demo here http://jsfiddle.net/QLbGc/ Thanks for any help, it's been annoying me for a couple of days now.
You forgot to put float:left; at the slideshow div
It should be
#slideshow {
background-color: #000;
margin: 15px;
height: 95%;
width: 60%;
-moz-border-radius: 15px;
border-radius: 15px;
float: left;
}
So now you have the 'slideshow' div floating left and 'about' div floating right and they can fit inside the parent div.
Basically they were inside the parent div from the first time but the about div was under slideshow div.
Demo:
http://jsfiddle.net/QLbGc/2/
If you're looking to have the two divs side by side here's a fiddle for that.
http://jsfiddle.net/Hastig/QLbGc/6/
I stripped out a bunch of stuff as I wasn't sure you needed it or it was just stuff you were throwing at it to try and affect change.
Somebody mentioned you were missing a float: left; in what we assume you wanted as your left div.
Remember to compensate for margin and padding to match the container div.
In my example the main container was 500px wide. If I set each float div to 250px width when added to the 20px combined margins on those divs the total width goes to 520px and pushes that right div under the left div so you'll want each floated div at 240px to compensate. Same deal with percentages.
If I misundestood your intention and you're looking to hide one of those div use display: none; on it and double the width of the one you want to show.
try to put this code in your css.
.content::-webkit-scrollbar {
display: none;
}
The code sample below works almost the same, if I include or remove the 'float: left' line. The only difference is the float left version moves the blocks below it up a bit more, but not more than a line break. I don't understand why you would add floating to an element set to 100% width. To my understanding,this prevents everything below it from flowing around it. Isn't that the purpose of floating?
ul
{
list-style-type: none;
float: left;
width:100%;
padding:0;
margin:0;
}
li
{
display: inline;
}
The reason why this works is because your <li> display is set to inline. This means that all elements with of this HTML tag will show up on the same line as all other ones. In other words, there will be no line-break. I would suggest the following instead:
ul {
list-style-type: none;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden; /* This will ensure there's a line break after using float for the list items */
}
li {
float: left;
}
This way you can ensure that each list item can also use margin and padding properly as opposed to inline elements which act as characters in a string of text normally would.
The float property is meant to allow an object to be displayed inline with the text directing it to one side. Float left is thus a lot like inline but with the exception that the element being floated is aligned towards the left or the right. It is not necessary to use the float:left; flag for what you are trying to do, It can often be better to place the ul where you want it using position, margin, padding, left , top , right , bottom instead. This usualy gives a more controllable result.
Here is an example fiddle of what happens when switching between no float and float left.
http://jsfiddle.net/um9LV/
The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it.
when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box or another floated element.
float:left - use float to get block elements to slide next to each other
display:block - Displaying the links as block elements makes the whole link area clickable (not just the text), and it allows us to specify the width
It is possible to use position:absolute and left and right on the middle column to set where it ends in relation to the parent div.
However I'd like to be able to have the left side of the center div to start right where the left column ends, and for the left column to be adjustable (based on its content).
This seems like a really basic thing but from what I understand there is no way to do this without flexboxes. Is this true? Is there nothing I could do with clever nesting of semantically superfluous elements and certain styles set to auto?
If the right div has some set width (either in % or px), then yes, you can let the left div's width be defined by its content while letting the center div fill in the remaining space:
#right {
position: absolute; /* position in top right corner */
top: 0;
right: 0;
width: 80px;
}
#center {
margin-right: 80px; /* same as #right width */
}
#left {
float: left;
}
jsFiddle DEMO
From what I can tell you'd be better off with simple floated blocks. If you wanted to absolute position all of them together, you could wrap them in an absolute container, and float them inside. Maybe I just don't understand why you need them absolutely positioned, but this seems like a viable option.
I have boiled down my problem to a pretty simple single file with the CSS included in a <style> tag.
The problem is:
I have a floating right column with a transparent background to show some text and pictures. This works fine, as expected.
Now I want to position a "Site designed by.... " block just above the footer.
I want to use an absolute positioned div for this, which is positioned relative to the containing #content div, which must get the position:relative property to achieve this.
When I set this property, the floating right column disappears, and seems to be hidden behind the background image of the #content block.
I cannot find an explanation for this. A workaround would be to position it relative to the footer (in that case the #footer div would get the position:relative property).
But I just would like to understand what goes wrong here and why the floating column is hidden. See the links for the layouts without and with the relative positioned content div.
Understandably, in the case of no relative positioning, the text is positioned relative to the browser in the bottom left corner.
http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html
http://websites.drsklaus.nl/relativeproblem/index_withrelative.html
You were almost there! Heres a little help to finish it.
#main {
width: 1005px;
margin: 20px auto; /* shorthand margin for x and y axis */
border: solid black 1px;
/* Added background to main instead so it still covers the full background */
background-image: url('grey-repeating-background-4.jpg');
}
#content {
position: relative;
min-height: 500px;
/* made the padding here margin, made it slightly bigger to accomedate the right column */
margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */
}
The reason for your right column to hide behind the content is that before you put position:relative; on it it is in normal flow, not 'positioned' and so z-index priority is really just by DOM order. Positioning it just made it a whole lot more important; obscuring the right column.
I have a layout template made to have a top banner, a left side menu and a content area to the right of the menu. I'm trying to figure out how to keep the 'application_layout_content' div from dropping below the 'application_layout_menu' if the browser window is narrowed. I'm not sure if I was doing this the right way to begin with; otherwise it seems to work fine.
(looking at IE7/IE8 mainly), I've played around with 'overflow' and 'position' properties but either will cause problems in one version or the other. Like 'Overflow: auto' will work in IE7 (main content div won't drop below the menu div), but in IE8 it will cause a greyed out vertical scrollbar and the main content div will still drop below the menu div.
Thanks!
#application_layout_header
{
background-image: url('../hHeader.jpg');
background-repeat: no-repeat;
height: 103px;
}
#application_layout_menu
{
width: 205px;
float: left;
}
#application_layout_content
{
float: left;
}
I don't think you can accomplish this as long as you have a fixed width defined for #application_layout_menu. Try making it a percentage value.
try setting a min-width on #application_layout_header