Help needed with CSS layout of 3 boxes where 1 box sits next another and then wraps under it.
Hello, I am trying to do a layout design I am not even sure if is possible to do. The basic idea is to have 3 boxes. The first contains an image and sit on the top left, the second is a table and sits on the right. The 3rd contains text and sits under the image, to the left of the table, but will wrap under the table if it goes that long. I have attached a porly drawn image of what I am talking about. I know with a Grid I can make the 3 boxes and align them up, I just don't know how to make that text box wrap under the table or if it is even possible. Can anyone provide any guidance? Thanks.
25 Replies
Would the image and text be in a container div and the table be floated against that? I am struggling to see how the table would float against both elements
Yes, they would need to be within a container.
Here is a quick demo https://codepen.io/cbolson/pen/rNbverN
do not forget to clear:both at the end
i cant stress this enough: DO NOT FORGET TO CLEAR THE FLOAT
you will have all sorts of weird issues if you dont, like the parent having 0px of height
Thanks for the code pen I see how it is done now. I was thinking backwards on it. Really apreciate it!
So this is working almost 100%, the only problem is that the table gets pushed up against the right edge and when the image is smaller then other this can lead to lots of blank space and look odd. Is there a way to make sure the table sits next to the image? So say the container is 800px and the image only takes up 300px. but the table is only 200px. This would cause 300px of blank space between the too.
tables...
the bane of css
and html
Yea, expecially to make them responsive. I wish there was a bettery way.
But I think this problem would still exist even if it was not a table. The floated element wants to sit on the right edge so it causes that big spacing between the left and right elements
to make them response, i force them into a grid
I am going to be dealing with the larger tables and responsivness later down the line.
Is it possible to shift the table cell over to be next to the image cell but still get the text to wrap under it or should I go back to the drawing board on the layout and display?
I wonder if I do something like make the table max-width content and then add another floaded div with a non breaking space afte that to take up the remainign it would push the table over where I want it?
do you have any code?
This is the code set. Nothing special the the CSS, floatRight is and clearFloat is a
Please use proper formatted code blocks. See #How To Ask Good Questions for the syntax
The whole thing sits under a where all my main content goes.
can you make a codepen?
is this what you want?
if it is, you have some things to do:
1-
.floatRight needs to be moved after the image
2- the image must float to the left
3- remove the paragraphs from the table
4- set clear:both on the parent of .floatRight and the imageI am looking to have the image and table sitting next to eachotehr and the text starting under the image and then expaning under the table when it can.
I forgot up to set the original pen to ahve alonger text and table. I updated the pen. The goal is to have the existing layout but have the table sit next to the image instead of hugging the right side of the page
Had to play with it for a while, but If your image has a fixed width, you could do something like this
https://codepen.io/MarkBoots/pen/bGJxBge
not gonna lie, nice work from you but that looks awful
it's just fixing a content problem with css
it has a lot of wasted space as well
yea, not sure this is the nicest layout, but liked the struggle to make it work. tried almost everything (css columns, grid, loads of calcs)
floating stuff in weird ways is always a massive pain
but that table really needs content
it's so thin
Thanks. The images have a fix max width. As I was going though this thread I was starting to think in my head this might be a bad design. I am on mobile at work so can't say for sure but it kind of looks like it feom the small pic I can see on my home.
I really appreciate all the help though!
The pages using that table would be large. I am trying to design a release information page . The goal is to have the name, logo, information about that particular release (like different editons and what was included in them as well as changes done if it was a remake or something), and a table containing things like release date platform locations publisher developer and much more.
The current data is just kind of a place holder while i make the layout but even a full table would not make it much wider
oh, that makes sense