Position and float

HTML & CSS
1

Hi,
I am trying this new layout, it has a button at bottom of screen, but it is not next to each other, as suppose to float, i understand float doesn’t work on position, but what should i do? Sorry for the broken layout. its on bootstrap and i don’t know how to embed BS in codepen.

2

What can you do with this layout without using positioned elements?

It would be nice if we could know what the finished page is supposed to look like. Can you create a mockup using a graphics program and post the image?

If you delete the positioned elements and put the background image on the body element, it seems to have potential.

The buttons will display on one line if you change the width from 50% to 49% or thereabouts (just to space them a tad) and delete the button margins by adding, button {margin:0}

What does the footer image look like? You could probably attach that to a message.

With a full layout, it is better if we can see it as a live site (test site) rather than on CodePen.

3

Hi,
Here is a mockup

4

It’s 2 image, one after another. I wonder if I can stack them to each other without using position.

---------------
  Image1
---------------
  Image 2
---------------

And overlapping them is a div which is gradient,within that div 2 floated column, side by side etc.

5

The mockup image is very helpful. Thank you.

Please rewrite your web page so it reflects approximately what you are describing WITHOUT using “positioned” elements. It’s OK if it doesn’t look exactly right. It’s not OK if it uses positioned elements for significant portions of the layout.

Is the page supposed to be responsive?

6

@ronpat I got that working without positioning. yay! thanks for hinting out. But my two different bg is showing same,

height:1854px;
background-image: url(‘…/img/header.jpg’), url(‘…/img/footer.jpg’);

the header is repeating itself, beneath the header

7

Good for you!

Add
background-repeat:no-repeat;

Your finished page should not depend on a fixed height. The height should be determined by the content and, therefore, be flexible.

Can you post your code on a web site so we can see it?
If not, you can attach your HTML and CSS to a message (either in the body of the message or as attached file(s) ).

In other words, I would feel better about offering advice if I could see your code rather than having to guess.

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.