Trying to build a reponsive header for my website.
I have 3 inline div (inside a parent div), first & last one have fixed width, & I want the middle one to horizontally fill the empty space. What is the best method to do that in CSS ? Should I use display: table ? I Hate table & I know they are not supposed to be used to create the layout of a website.
Should look like that : <-LEFTDIV-> <-----MIDDLEDIV---this one stretch to fill empty space> <-RIGHTDIV->
Any help would be appreciated !!
Related
I got some cards that should show a trailer of a website taking the title and a excerpt from that given website. The bottom grey background is a parent div with display: flex on it. I've set the container to height: 200px and the child elements should fit inside.
Because the title and text can vary from site to site i would like to make them fit as best as possible with just one CSS class.
So, when a title is shorter and only takes up one line, I would like to add one line to the excerpt field.
Is there any way to make that happen with CSS? can display: flex handle this? I've tried to use flex-grow but it doesn't work
Trying to create a Mailchimp template I am struggling with vertically centering the next inside a predefined layout element.
Screenshot here
Using a table it is possible to center the text in a way that I want but only given the height of the image in pixels which define the height of that row. Setting the table height to 100% has no effect.
Is there any way to - using HTML inside the editor - center this text without requiring any hard coded height?
I am hoping to find a solution without coding the entire element because I doubt I would end up with the same amount of responsivity.
I'm working on a mobile site, which has a fluid layout. On the main page, I have a table which contains a few products.
Each product has 3 divs: product-image, product-name and prices-container.
I can't seem to figure out how to align the prices-container div horizontally across the table-rows.
I'm thinking that there would be 2 approaches to this problem: either product-name always takes the height of the highest product-name across the table-row, either prices-container always sticks to the bottom of my product table-cell. Can't seem to figure out how to apply any.
Here's an illustration of the problem.
Left image shows my problem and right image shows how I would like it to be.
This wouldn't be a problem if product-name would have a fixed height, but due to the fact that this text is dynamic, I cannot know what height it will have. Might be one line of text, might be 10 lines.
I created a CodePen, where you can check my code and the problem >>here<< (I know it looks ugly, using background-colors to figure out faster what's happening).
I'm using Jade for my HTML and Stylus for my CSS.
Limitations:
- must be CSS & HTML only, I would prefer not using Javascript
- solution must be suitable for fluid layout (width is set with percentage)
- cannot use a fixed height of product-name, this being a dynamic text
Any ideas how to do this? Thank you! :)
add vertical-align:bottom; css style to .box1 class.
Similarly, add same style for .box4 css class.
Thanks,
I've got a table#Content which has a background that extends beyond it's horizontal bounds. I've sliced up the the backgrounds and made a table#Main, with td#Left, td#Content (which contains table#Content), and td#Right. I've set the backgrounds into the td#Left and td#Right, positioned correctly.
Question 1) I can't get the whole table#main to be centered on the page.
Question 2) The design is beyond 960px. But the main content is within 912px. The td#Left and td#Right are extra. Is there a way to keep the main content centered and if needed shrink the td#Left & td#right.
[update] I'm open to directions towards a div solution.
[update2] I'm going to rephrase the question. How do I make 3 columns fill the screen, with 2 outer columns be auto/% and have the middle one be 912px.
For the table and margin: 0 auto; to center it if that doesn't work put a surrounding div with that style in it along with a width....
The table background just add background:url(...) center center ;
I'd give you an example but I'm on my phone
I'd like to create a 3 column layout, with the middle being for all the content and menus and the other two being a solid background color.
I have something like this set up already, but the middle column doesn't extend to the bottom of the page. How can I get this middle column to extend to the bottom of the page?
Since most pure-CSS answers to this question are not supported by browsers, your best best is often to use a background image for this. Create the image with the right sized columns and apply it to whatever contains all three columns on the page. Make sure that the image can be horizontally repeated, and it will do so all the way down to the bottom of the page, even if the middle column is not actually the right size.
This site is really helpful for this sort of thing:
http://css.maxdesign.com.au/floatutorial/tutorial0916.htm
But I think the basic idea is you create a float:left div and then a float:right div and then another div for the middle.